## 一、概述 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) ```