最近在看vue
的课程,说到vue插件,其实还蛮希望有一天自己能写一个vue插件。
插件干嘛的呢,官网说有四种用途:
- 添加全局方法或者属性
- 添加全局资源,如
directives, filters,transitions
- 全局混入添加组件选项
- 添加 Vue 实例方法,
Vue.prototype.$xx=..
MyPlugin.install = function (Vue, options) {
// 1. 添加全局方法或 property
Vue.myGlobalMethod = function () { }
// 2. 添加全局资源
Vue.directive('my-directive', {
bind (el, binding, vnode, oldVnode) { }
})
// 3. 注入组件选项
Vue.mixin({
created: function () { }
})
// 4. 添加实例方法
Vue.prototype.$myMethod = function (methodOptions) { }
}
如果你手上有好几个项目,每个项目都添加一些相似的全局方法、资源等,就可以试着写一个插件,这样方便管理,万一一不小心,可能成为网红,你就发了。
怎么安装插件
插件安装其实就两步:
- 引入
import xx from 'xx'
- 再,
Vue.use(xx)
,有时候可能需要加一个options
怎么写插件
先来个简单的!
实现开始就打印vue-helloworld
的插件!
官网说了,Vue.use
其实是执行了插件的install
方法,且给install
传了两个参数,一个Vue
构造器,另一个就是可选的参数
。
那么,vue-helloworld.js
其实就很简单啦
export default {
install(Vue) {
Vue.mixin({
created() {
console.log("hello-world");
}
});
}
};
安装下:
// main.js
import Vue from "vue";
import App from "./App.vue";
// 这里
import VueHelloworld from "./vue-helloworld";
Vue.use(VueHelloworld);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
这样启动项目,就看到控制台打印了hello-world
了。
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了?
- 找不到素材资源介绍文章里的示例图片?
- 模板不会安装或需要功能定制以及二次开发?
发表评论
还没有评论,快来抢沙发吧!