自己动手开发Vue插件（之一）Vue插件之公共方法封装

Vue插件之公共方法封装

1. 官方教程:

       MyPlugin.install = function (Vue, options) {
           // 1. 添加全局方法或属性
           Vue.myGlobalMethod = function () {
               // 逻辑...
           }
   
           // 2. 添加全局资源
           Vue.directive('my-directive', {
               bind (el, binding, vnode, oldVnode) {
               // 逻辑...
               }
               // ...
           })
   
           // 3. 注入组件
           Vue.mixin({
               created: function () {
               // 逻辑...
               }
               // ...
           })
   
           // 4. 添加实例方法
           Vue.prototype.$myMethod = function (methodOptions) {
               // 逻辑...
           }
       }

2. 初学时，看着有点懵，不知道从哪儿下手，那就一个一个来试试咯

       // 创建一个插件文件 test.js
       let test = {}
       test.install = function (Vue, options) {
           Vue.prototype.$msg = 'Hello I am test.js'
       }
       export default test
   
       // 在main.js中添加
       import test from './test'
       Vue.use(test)
   
       // 去其他地方测试下 例如 app.vue
       created () {
           console.log('现在的api: ', this.$msg)      // 初始化项目时，会打印 Hello I am test.js
       },
   
       // 第一步尝试成功

3. 添加一些方法

       // test.js
       Vue.prototype.$netErr = (tag, err) => {
           console.log(`Error find in interface ${tag}: ${err}`)
           Message('请求数据失败，请稍后重试！')
       }

That`s all，vue的纯js插件就是这么产生的，希望可以帮到小伙伴们~~，敬请期待下期的vue注入组价的开发方法