第一部分：main.js文件解析

src/main.js是入口文件            ，主要作用是初始化vue实例并使用需要的插件 在main.js文件中定义了一个vue对象,其中el为实例提供挂载元素 //基础配置 import Vue from vue import App from ./App.vue //引入已经配置好的路由和vuex import router from ./router import store from ./store/store // 导入less(样式的导入例子  
 
  
 
  
 
  
 
  
 
  
 
，css,less) //import @/assets/xxx.less //导入js(例如) //import xxx from xxx.js // 是否启动生产消息 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 // 其他js文件可以引用main.js的myVue实例从而调用myVue的router            、store等等 //调用注意 main.$store,main.$router即使是vue原型链上的axios也可以被调用 //main.$axios

第二部分：Vue.use的作用以及什么时候使用

在Vue中引入使用第三方库通常我们都会采用import的形式引入进来











，但是有的组件在引入之后又做了Vue.use()操作
  
  
  
  
  
  ，有的组件引入进来又进行了Vue.prototype.$something = something  
  
  
  
  
  
，那么它们之间有什么联系呢？

先说一下Vue.prototype
 


 


 


 


 


 

，在Vue项目中通常我们引入axios来进行请求接口数据
 
 
 
 
 
 ，通过npm安装之后我们只需在我们的文件中import axios from "axios"就可以使用   
   
   
   
   
   
，有时候我们会加上一句Vue.prototype.$axios = axios
 

 

 

 

 

 
，prototype我们应该是再熟悉不过了 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)

Vue.use是什么？（官方文档）

通过全局方法 Vue.use() 使用插件            ，Vue.use 会自动阻止多次注册相同插件
 
 

 
 

 
 

 
 

 
 

 
 
，它需要在你调用 new Vue() 启动应用之前完成











，Vue.use() 方法至少传入一个参数                  ，该参数类型必须是 Object 或 Function 
 
 
 
 
 
 
 
 
 
 
 
，如果是 Object 那么这个 Object 需要定义一个 install 方法

















，如果是 Function 那么这个函数就被当做 install 方法
  
  
  
  
  
  。在 Vue.use() 执行时 install 会默认执行            ，当 install 执行时第一个参数就是 Vue  
 
  
 
  
 
  
 
  
 
  
 
，其他参数是 Vue.use() 执行时传入的其他参数 
  
  
  
  
  
 。就是说使用它之后调用的是该组件的install 方法 


 


 


 


 


 


。

Vue.use()什么时候使用？

它在使用时实际是调用了该插件的install方法











，所以引入的当前插件如果含有install方法我们就需要使用Vue.use()
  
  
  
  
  
  ，例如在Vue中引用Element如下：

import Vue from vue import App from ./App.vue import router from ./router import store from ./store // 注册elementUi import ElementUI from element-ui import element-ui/lib/theme-chalk/index.css Vue.use(ElementUI) // 是否启动生产消息 Vue.config.productionTip = false new Vue({ router, store, render: h => h(App) }).$mount(#app)

 利用 Vue.use 统一全局注册组件

说明:

Vue.use 可以接收一个对象, Vue.use(obj)

对象中需要提供一个 install 函数

install 函数可以拿到参数 Vue, 且将来会在 Vue.use 时, 自动调用该 install 函数

第一步：提供统一注册的入口文件 src/componets/index.js ​​​​​​​

// 该文件负责所有的公共组件的全局注册 // vue插件机制: Vue.use import PageTools from ./PageTools export default { install(Vue) { Vue.component(PageTools, PageTools) } }

第二步：在入口处进行注册 src/main.js Vue.use 注册使用自己的插件模块

import Components from ./components Vue.use(Components)