引入图表、各种第三方库 cdn....
<script src="https://lib.baomitu.com/vuex/4.0.2/vuex.cjs.js"></script>
<script src="https://lib.baomitu.com/vue/3.2.11/vue.cjs.js"></script>
然后webpack配置:
externals: {
'vue': 'Vue',
'vue-router': 'VueRouter',
'mint-ui': 'MINT', 某ui库
"BMap": "BMap", 百度地图
'vuex': 'Vuex'
},
import Vuex from 'vuex'
然后一系列 Vue.use(Vuex)
// 文件: src/classes/vue-use/plugins.js
const Plugin1 = {
install(a, b, c) {
console.log('Plugin1 第一个参数:', a);
console.log('Plugin1 第二个参数:', b);
console.log('Plugin1 第三个参数:', c);
},
};
function Plugin2(a, b, c) {
console.log('Plugin2 第一个参数:', a);
console.log('Plugin2 第二个参数:', b);
console.log('Plugin2 第三个参数:', c);
}
export { Plugin1, Plugin2 };
// 文件: src/classes/vue-use/index.js
import Vue from 'vue';
import { Plugin1, Plugin2 } from './plugins';
Vue.use(Plugin1, '参数1', '参数2');
Vue.use(Plugin2, '参数A', '参数B');
// Vue源码文件路径:src/core/global-api/use.js
import { toArray } from '../util/index'
export function initUse (Vue: GlobalAPI) {
Vue.use = function (plugin: Function | Object) {
const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
if (installedPlugins.indexOf(plugin) > -1) {
return this
}
// additional parameters
const args = toArray(arguments, 1)
args.unshift(this)
if (typeof plugin.install === 'function') {
plugin.install.apply(plugin, args)
} else if (typeof plugin === 'function') {
plugin.apply(null, args)
}
installedPlugins.push(plugin)
return this
}
}
从源码中我们可以发现vue首先判断这个插件是否被注册过,不允许重复注册。
并且接收的plugin
参数的限制是Function | Object
两种类型。
对于这两种类型有不同的处理。
首先将我们传入的参数整理成数组 => const args = toArray(arguments, 1)
。