介绍与使用
Vue.use() （vue2.x是Vue.use,vue3.x是app.use）在 vue 中使用很多，比如 ElementUI, vantUI, VueI18n, Router, Vuex 等部分第三方库、组件、自定义方法等，在引用后会使用 Vue.use 将他们传入作为参数使用
如下：
vue2.x使用Vue.use()
importVuefrom'vue'; importAppfrom'./App'; importrouterfrom'./router'; importstorefrom'./store'; // 引入国际化插件importVueI18nfrom'vue-i18n'; // 引入统一配置importcommonfrom'./lib/common'; // 引入animate.cssimportanimatedfrom'animate.css'; Vue.use(animated); Vue.use(VueI18n); // 通过插件的形式挂载Vue.use(common); // 全局配置项/* eslint-disable no-new */// 把vue实例挂载在window.vm,方便使用vue的实例window.vm=newVue({ el: '#app', router, store, components: { App, }, template: '<App/>', });
vue3.x使用app.use()
import { createApp } from'vue'; importAppfrom'./App.vue'; importrouterfrom'./router'; importstorefrom'./store'; importvantfrom'vant'; import'vant/lib/index.css'; importglobalFunctionfrom'./utils/globalFunction'; // 引入全局方法constapp=createApp(App); app.use(vant); app.use(store); app.use(router); // 挂载全局方法for (constkeyinglobalFunction) { app.provide(key, globalFunction[key]); console.log(key); } app.mount('#app'); window.vm=app;
先看一下官方给的文档说明：
通过Vue.use安装 Vue.js 插件。如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法，install 方法调用时，会将 Vue 作为参数传入。
需要注意的是：通过Vue.use安装 Vue.js 插件，如果插件是一个对象，那么对象当Vue.use(插件)之后，插件的install方法会立即执行；如果插件是一个函数，当Vue.use(插件)之后，函数会被立即执行
也就是说：
Vue.use参数为函数（插件为函数）时，函数的参数是Vue对象
Vue.use参数为对象（插件为对象）时，它提供的install方法中参数是Vue对象
所以可以进行以下尝试（以vue2.x的使用为例，3.x写法与2.x类似）：
首先是 Vue.use参数为对象（插件为对象）时
自定义一个demo文件：
constdemo= { // 参数为对象时，需要提供install方法install: (Vue) => { console.log('自定义插件', Vue); // 定义一些vue中常用的全局方法Vue.prototype.$Toast= () => { console.log('全局toast提示') }; // toast提示,通过this.$Toast调用Vue.prototype.$request= () => { console.log('全局request请求') }; // request请求,通过this.$request调用 } } exportdefaultdemo;
main.js中通过Vue.use安装自定义的demo插件：
importVuefrom'vue'; importAppfrom'./App'; importrouterfrom'./router'; importstorefrom'./store'; importdemofrom'./lib/demo'; Vue.use(demo); // 安装自定义插件/* eslint-disable no-new */// 把vue实例挂载在window.vm,方便使用vue的实例window.vm=newVue({ el: '#app', router, store, components: { App, }, template: '<App/>', });
接下来是 Vue.use参数为函数（插件为函数）时
自定义一个common文件：
constcommon= (Vue) => { console.log('自定义插件', Vue); // 定义一些vue中常用的全局方法Vue.prototype.$Toast= () => { console.log('全局toast提示') }; // toast提示,通过this.$Toast调用Vue.prototype.$request= () => { console.log('全局request请求') }; // request请求,通过this.$request调用}; exportdefaultcommon;
main.js中通过Vue.use安装自定义的common插件：
importVuefrom'vue'; importAppfrom'./App'; importrouterfrom'./router'; importstorefrom'./store'; importcommonfrom'./lib/common'; Vue.use(common); // 安装自定义插件/* eslint-disable no-new */// 把vue实例挂载在window.vm,方便使用vue的实例window.vm=newVue({ el: '#app', router, store, components: { App, }, template: '<App/>', });
插件除了默认的参数 Vue 以外，还可以按需要传入自定义参数，如（两种方式都可以，这里拿参数为对象形式举例）
自定义一个demo文件：
constdemo= { // 参数为对象时，需要提供install方法install: (Vue, a, b, c) => { console.log('自定义插件', Vue, a, b, c); // 定义一些vue中常用的全局方法Vue.prototype.$Toast= () => { console.log('全局toast提示') }; // toast提示,通过this.$Toast调用Vue.prototype.$request= () => { console.log('全局request请求') }; // request请求,通过this.$request调用 } } exportdefaultdemo;
main.js中通过Vue.use安装自定义的demo插件：
importVuefrom'vue'; importAppfrom'./App'; importrouterfrom'./router'; importstorefrom'./store'; importdemofrom'./lib/demo'; Vue.use(demo, 1, 2, {name:'小明'}); // 安装自定义插件/* eslint-disable no-new */// 把vue实例挂载在window.vm,方便使用vue的实例window.vm=newVue({ el: '#app', router, store, components: { App, }, template: '<App/>', });
Vue.use源码
import { toArray } from'../util/index'// Vue.use 源码exportfunctioninitUse (Vue: GlobalAPI) { // 首先先判断插件plugin是否是对象或者函数：Vue.use=function (plugin: Function|Object) { constinstalledPlugins= (this._installedPlugins|| (this._installedPlugins= [])) // 判断vue是否已经注册过这个插件,如果已经注册过，跳出方法if (installedPlugins.indexOf(plugin) >-1) { returnthis } // 取vue.use参数,toArray() 方法代码在下一个代码块constargs=toArray(arguments, 1) args.unshift(this) // 判断插件是否有install方法，如果有就执行install()方法。没有就直接把plugin当Install执行。if (typeofplugin.install==='function') { plugin.install.apply(plugin, args) } elseif (typeofplugin==='function') { plugin.apply(null, args) } installedPlugins.push(plugin) returnthis } }
// toArray 方法源码exportfunctiontoArray (list: any, start?: number): Array<any> { start=start||0leti=list.length-startconstret: Array<any>=newArray(i) while (i--) { ret[i] =list[i+start] } returnret}
文章参考：https://blog.csdn.net/weixin_43788115/article/details/103384064?spm=1001.2014.3001.5506
