vue如何进行插件的编写

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')