Vue-引入ElementUI&&use底层原理

---

如何引入ElementUI

1.安装 官方地址

npm i element-ui -S

2.再main.js中引入并挂载到vm对象中

import Vue from 'vue';
import ElementUI
from 'element-ui';//引入组件库
import 'element-ui/lib/theme-chalk/index.css';//全局的css样式
import App from './App.vue';

Vue.use(ElementUI);//注册全局组件==>Vue.component("xxxx",{})

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

但是呢这种再main.js中去挂载的写法不太利于管理和维护，代码比较混乱，
还有一种是将这个插件的逻辑封装成一个对象，最后将在 install 编写业务代码暴露给 Vue 对象。这样做的好处是可以添加任意参数在这个对象上方便将 install 函数封装得更加精简，可拓展性也比较高。

Vue.use()

use 的基本原理就是：

• 外界 use 引入组件，触发内部 install 方法，并且传了一个Vue对象；
• 进入以后通过 component 注册一个全局组件（全局组件知识点）；
• 最后，外部就可以全局使用组件了。

那么外部组件挂载如何实现的呢：
1.创建一份JS文件并插入：

//use语法
//写法一:
let obj={
 	install(arg){
		//agr就是调用use的对象,也就是Vue对象
 		// install会直接运行
 		arg.prototype.hqyj=100
	}
 }
// Vue.use(obj)//会执行obj内部的install

//写法二：
 let install=(arg)=>{
 	arg.prototype.hqyj2=100
 	arg.component("mygold",Gold1)
 }
// Vue.use(install)//会直接执行传入install

//写法三： 挂载外部组件最常用写法
import Vue from "vue"
import axios from "axios"
axios.defaults.baseURL="http://localhost:8080/serve"
let myplug={}
myplug.install=(Vue)=>{
	Vue.prototype.$axios=axios   
	//这面可以继续写其它外部组件
}
Vue.use(myplug)

然后再main.js中引入：

import myplug from './common/plug.js'