1. Análisis del archivo Main.js

src/main.js es el archivo de entrada, su función principal es inicializar la instancia de vue y utilizar los complementos necesarios.
Un objeto vue se define en el archivo main.js, en el que el proporciona un elemento de montaje para la instancia.

//基础配置
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. La función y el uso de Vue.prototype

Coloque el método o propiedad en el prototipo de la instancia de Vue y hágalo disponible globalmente. Utilice this.property y 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. El papel de Vue.use y cuándo usarlo

En pocas palabras, se utiliza para registrar componentes globales.

1. Componentes

Hola componente

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

Componente mundial

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

2. Defina un archivo index.js, introduzca dos componentes y exporte:

// 引入组件
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. Introduzca index.js en 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. Uso global (se puede utilizar directamente sin importar)

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

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

resultado:

4. Resumen al final del artículo:

Incluso si no utiliza referencias independientes sayHelloa sayWorldestos dos componentes, aún pueden usarse globalmente. Vue.use()La función es permitir que los componentes registrados en él se utilicen globalmente.
axios¿ Por qué se puede Vue.use(axios)usar directamente sin usarlo?

Axios no proporciona los componentes correspondientes para que los usuarios los utilicen globalmente y los desarrolladores axiosno los configuran en absoluto al encapsularlos install.
Incluso si axios proporciona componentes globales internamente, siempre que estos componentes no se utilicen, no Vue.use(axios)se informará ningún error incluso si no se utilizan para el registro.

El método de instalación se proporciona solo para permitir que Vue registre el componente en el marco para que pueda usarse globalmente.

Explicación detallada de cómo usar main.js en el proyecto vue