vue插件的制作----基于Vue和PHP打造前后端分离的通用管

要使用Vue，基础要会Vue组件，其实Vue还支持看起来技术含量更高的插件。组件和插件的区别，因人而异。不过组件的教程多，插件却少的很。本篇从组件入门，深入展示插件的用法。
Vue组件的制作，非常简单，这里我们先做一个管理框架页面组件。

Vue组件

把前面写的界面提取为Vue组件

1. 在 src\components下新建Admin.vue文件
2. 把App.vue文件内容复制到Admin.vue
3. 将Admin.vue中找到对应行并修改：

<el-container id="app">  => <el-container id="admin">
<style> => <style scoped>

4. 删除Admin.vue内<style scoped>中的html, body样式
5. 修改App.vue

<template>
  <admin />
</template>

<script>
import Admin from './components/Admin.vue';

export default {
  name: 'App',
  methods: {
  },
  components: {
    Admin
  },
};
</script>

<style>
html,body{
  height: 100%;
  overflow: hidden;
}
</style>

界面依旧正常显示，第一个vue组件完成

axios插件

axios用来实现异步通讯，为了演示插件的制作，我们把他包装为插件。

1. 在src目录下新建Util目录
2. 在Util目录下新建Http.js文件。

/** 
 * 这是Vue插件的介绍。
 * Vue插件用来：
 *   1、添加全局的东西（比如Vue-router）
 *   2、扩展 Vue 实例方法（过把它们添加到 Vue.prototype 上实现）。
 */
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) {
    // 逻辑...
  }
}