vue的插件,我们通常用来封装一些使用频率很高的全局资源,如:全局属性/方法、全局混入mixins、全局组件等。
其实还是解决一个问题,更方便的复用。
定义一个插件
我们在src/plugin下新建一个index.js,定义的方法和属性一定是在install方法内。
index.js
export default {
install(Vue){
// 定义全局属性
Vue.prototype.$myPlugin = '全局属性';
// 定义全局方法
Vue.prototype.$myFun = function (){
console.log('全局方法')
}
// 定义全局指令
Vue.directive('focus',{
inserted(el){
console.log(el)
el.focus();
}
});
// 定义全局的mixins
Vue.mixins({
data(){
return {}
},
methods:{}
});
// 定义全局组件
Vue.component('组件名',引入的组件模块)
}
}
组件的使用
在main.js 中,引入plugin/index.js
使用Vue.use()这个Api安装插件,关于Vue.use()的使用,官网已经写得比较清楚了,如果有想深入理解的同学,可以去看看use的源码,下次再跟大家分享源码。
main.js
import Vue from 'vue'
import App from './App.vue'
// 引入插件模块
import testPlugin from "./plugin/index";
// 安装插件
Vue.use(testPlugin)
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')