Vue 外掛程式開發

vue.js 的外掛程式應當有乙個公開方法 install 。這個方法的第乙個引數是 vue 構造器 , 第二個引數是乙個可選的選項物件:

myplugin.install = function (vue, options) 

vue.directive('my-directive', 
...})
vue.mixin(
...})
vue.prototype.$mymethod = function (options) 
}

當我們建立了$vm例項後，我們可以訪問該例項的屬性和方法，比如通過$vm.show就可以改變nwdloadingcomponent元件的show值來控制其顯示隱藏。

最終我們通過vue.mixin或者vue.prototype.$loading來全域性新增了$loading事件，其又包含了show和hide兩個方法。我們可以直接在頁面中使用this.$loading.show()來顯示載入，使用this.$loading.hide()來關閉載入。

main.js

import nwdloading from '@/components/nwd-loading/index.js'

vue.use(nwdloading)

export default 

}

vue外掛程式開發

vue外掛程式開發主要是用來實現一些全域性方法或者全域性物件。vue的外掛程式要求是實現乙個install公開方法。其中此install方法的第乙個入參是vue構造器，第二個入參是 是乙個可選的選項物件。一 開發 以乙個alert的彈窗外掛程式為示例，alert.js 具體 如下 定義乙個全域性變數...

vue開發外掛程式

1 新建plugin.js,檔案內容如下 import name1 from name1.vue let myplugin myplugin.install function vue,options 2.新增全域性資源 vue.directive my directive 3.注入元件選項 vue....

npm外掛程式開發 Vue外掛程式

vue init webpack npm vue ui,dependencies browserslist 1 last 2 versions not ie 8 devdependencies const path require path const webpack require webpack...