怎么写一个vue插件
最近在看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了。
