编写插件
写 vue 插件稍微复杂一点 😢，根据官网的案例，我们需要提供一个包含 install 方法的对象或者一个函数（传送门），供 Vue.use 调用注册你的插件
写法一1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31import Component from'./YanProgress.vue'; // 这个就是你平时写的 SFC 组件// 这里要导出一个包含 install 方法的对象let plugin = { // 这里要导出一个 install 方法
install(Vue,options) {
// 这里写你的代码，你可以全局注册组件，也可以写全局指令，也可以扩展 Vue 的方法// 1. 全局组件
Vue.component('yan-progress',Component);
// 2. 全局方法或属性
Vue.myGlobalMethod = function () {
// 逻辑...
}
// 3. 全局指令
Vue.directive('my-directive', {
bind (el, binding, vnode, oldVnode) {
// 逻辑...
}
})
// 4. 注入组件
Vue.mixin({
created: function () {
// 逻辑...
}
})
// 5. 添加实例方法
Vue.prototype.$myMethod = function (methodOptions) {
// 逻辑...
}
}
};
if (window && window.Vue) { // 如果是渐进式开发（script 引入简单粗暴的开发方式），需要自动注册你的插件window.Vue.use(plugin);
}
exportdefault plugin;
写法二1
2
3
4
5
6
7
8
9
10import Component from'./YanProgress.vue'; // 这个就是你平时写的 SFC 组件// 或者这里也可以写成函数functionplugin(Vue,options) {
// 这里写你的代码，你可以全局注册组件，也可以写全局指令，也可以扩展 Vue 的方法
Vue.component('yan-progress',Component);
}
};
if (window && window.Vue) { // 如果是渐进式开发（script 引入简单粗暴的开发方式），需要自动注册你的插件window.Vue.use(plugin);
}
exportdefault plugin;
这样写的原因是，下面源码伺候😄1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19export 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') { // 如果是带有 install 方法的对象
plugin.install.apply(plugin, args) // 不改变插件的 this（这里的 this 还是指向插件对象本身）
} else if (typeof plugin === 'function') { // 如果是函数
plugin.apply(null, args) // 不改变插件的 this（这里应该是指向window，在浏览器非严格模式下）
}
installedPlugins.push(plugin)
return this
}
}
vue-alert插件
1 | import AlertComponent from "./vue-alert.vue"; // 引入先前写好的vue |
1 | <template> |