## 一、概述 1、组件（component）用来构成app的业务模块，它的目标是App.vue； 2、插件（plugin）用来增强技术栈的功能模块，它的目标是app本身（插件是对vue功能的增强和扩展，比如vue-router,vuex），它通常用来为 Vue 添加全局功能； ## 二、用途 1、vue插件可以将自己的模块添加到Vue原型对象上，然后vue页面中可以通过this直接引用。（通过插件机制，可以通过一个入口，将一系列组件添加到环境中，直接使用，插件干的事就是把内部的组件导入到Vue全局下）； 2、模块或者组件想要对外公开，最友好的方式就是通过插件机制提供； ## 三、使用 通过全局方法`Vue.use()`或` Vue.prototype`使用插件。它需要在你调用`new Vue()`启动应用之前完成： 在main.js 中使用插件： ``` // 调用 `MyPlugin.install(Vue)` Vue.use(MyPlugin，{ someOption: true }) new Vue({ // ...组件选项 }) ``` Vue.use会自动阻止多次注册相同插件，届时即使多次调用也只会注册一次该插件。 Vue.js 官方提供的一些插件 (例如 vue-router) 在检测到 Vue 是可访问的全局变量时会自动调用 Vue.use()。然而在像 CommonJS 这样的模块环境中，你应该始终显式地调用 Vue.use()： ``` // 用 Browserify 或 webpack 提供的 CommonJS 模块环境时 var Vue = require('vue') var VueRouter = require('vue-router') // 不要忘了调用此方法 Vue.use(VueRouter) ``` 这样，在每个Vue的实例里我们都能调用MyPlugin插件的各api方法了。this.$xxx 这个xxx就是MyPlugin的对象方法；Vue.use会自动阻止多次注册相同插件，届时即使多次调用也只会注册一次该插件。 这样我们就可以在全局使用了。 ## 四、开发插件 Vue.js 的插件应该暴露一个install方法。这个方法的第一个参数是Vue构造器，第二个参数是一个可选的选项对象： ``` 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) { // 逻辑... } } export MyPlugin ``` 可以看到$myMethod方法注入到Vue的原型中，所以，可以在挂接后，直接使用该方法了； >[danger] 使用该插件的时候，用Vue.use方法，也就是调用该插件的install方法； ## 五、简单例子 ``` //utils/request.js const installer = { vm: {}, install (Vue) { Vue.use(VueAxios, service) } } export { installer as VueAxios, service as axios } ``` ``` import { VueAxios } from'./utils/request' Vue.use(VueAxios) ```