1. Main.js file analysis

src/main.js is the entry file. Its main function is to initialize the vue instance and use the required plug-ins.
A vue object is defined in the main.js file, in which el provides a mounting element for the instance.

//基础配置
import Vue from 'vue'
import App from './App.vue'
  
//引入已经配置好的路由和vuex
import router from './router'
import store from './store/store'
  
// 是否启动生产消息
Vue.config.productionTip = false
  
//第一种写法
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
  
//第二种写法
const myVue=new Vue({
  el:'#app',
  router,
  store,
  render: h => h(App)
})
  
export default myVue

2. The function and use of Vue.prototype

Put the method or property on the prototype of the Vue instance and make it globally available. Use this.property and this.method.

import Vue from 'vue'
import App from './App.vue'
//路由导入
import router from './router'
//vuex导入
import store from './store'
//npm下载好的三方axios包
import axios from 'axios'
// 是否启动生产消息
Vue.config.productionTip = false
// 设置axios的请求根路径
axios.defaults.baseURL = 'url'
// 把 axios 挂载到 Vue.prototype 上
Vue.prototype.$http = axios
//其实是在Vue原型上增加了一个$http，然后在其余的vue组件的文件中,
//可以通过this.$http直接来使用axios
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

3. The role of Vue.use and when to use it

Simply put, it is used to register global components.

1. Components

Hello component

<template>
    <div>
        this is Hello...
    </div>
</template>

World component

<template>
    <div>
        this is World...
    </div>
</template>

2. Define an index.js file, introduce two components, and export:

// 引入组件
import Hello from './Hello.vue'
import World from './World.vue'

// 定义 Loading 对象
const installObj = {
  // install 是默认的方法。当外界在 use 这个组件的时候，就会调用本身的 install 方法，同时传一个 Vue 这个类的参数。
  install: function (Vue) {
    Vue.component('sayHello', Hello),
    Vue.component('sayWorld', World)
  }
}

// 导出
export default installObj

3. Introduce index.js into main.js

import Vue from 'vue'
import App from './App.vue'
// 这里用什么名字，并不重要
import installObj from './/index'

// 只要这里引用对就行
Vue.use(installObj)

new Vue({
  el: '#app',
  render: h => h(App)
})

4. Global use (can be used directly without importing)

<template>
  <div id="app">
    <h1>vue install example</h1>
    <sayHello></sayHello>
    <sayWorld></sayWorld>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {}
  }
}
</script>

result:

4. Summary at the end of the article:

Even if you do not use independent references sayHelloto sayWorldthese two components, they can still be used globally. Vue.use()The function is to enable the registered components in it to be used globally.
axiosWhy can it be Vue.use(axios)used directly without using it?

Axios does not provide corresponding components for users to use globally, and developers axiosdo not configure them at all when encapsulating them install.
Even if axios provides global components internally, as long as these components are not used, no Vue.use(axios)error will be reported even if they are not used for registration.

The install method is provided just to allow Vue to register the component into the framework so that it can be used globally.

Detailed explanation of how to use main.js in vue project