一、源码分析
用vue插件时，我们会引入插件后，调用下Vue.use()，如：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
为啥要执行下Vue.use()呢？我们来看下Vue.use源码
image.png
我们来看下vuex的index.d.ts，导出组件时的写法：
image.png
二、用法介绍
vue.use（plugin, arguments） ，参数：plugin(Function | Object)
说明：
-
vue安装的组件类型必须为Function或者是Object - 若是
Object，必须提供install方法 - 若是
Function，会被直接当作install函数执行 -
install函数接受参数，默认第一个参数为Vue,其后参数为注册组件时传入的arguments
所以我们自己的插件封装方式一般都为Object，提供install方法，案例elementui2如下：
import Cascader from './components/form/src/Cascader'
import Checkbox from './components/form/src/Checkbox'
import ColorPicker from './components/form/src/ColorPicker'
const components = {
Cascader,
Checkbox,
ColorPicker,
}
const install = function(Vue) {
Object.keys(components).forEach(key => {
Vue.component(key, components[key])
})
};
/* 支持使用标签的方式引入 */
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue);
}
Object.assign(components, {
version: '1.0.1',
install
})
export default components
三、如上插件不调用use可以吗
也是可以的。我们还是以上述
elementui2为例：
我们用Vue.use(elementui2)的时候，用的是对象中的install；全局引入install函数中注册过的组件；
- A. 若不需全局引入，具体某个页面需要用，且只需要引用其中某个或某几个组件，不需要
use，用import即可：
import { Cascader,Checkbox } from elementui2
components: { Cascader,Checkbox }
- B. 全局引入后，不用
use可不可以呢？也可以啊，就是麻烦点呗，具体页面components配置项配置下即可。
//我打包的时候，package.json中配置的name是eui
//main.js中全局引入
import eui from elementui2
//具体页面调用
let cmpts = { } //这里写页面单独引入的一些组件
//全部引入也可以： Object.assign(cmpts, eui2）
Object.assign(cmpts, {Cascader: eui.Cascader })
components: cmpts
四、没有install 函数的 js 库
像jquery、axios、js-cookie等等，很多库，都没有install函数，引入调用也不需要Vue.use，来看下axios的源码：
image.png
在需要的地方引入该js库，调用对应的方法即可。
这种并非专门给vue写的，更非组件，如axios只是一个同时支持支持node端和浏览器端的http库。
