vue 外掛程式的開發與使用

2022-08-21 00:09:15 字數 897 閱讀 8387

外掛程式通常會為 vue 新增全域性功能。外掛程式的範圍沒有限制——一般有下面幾種:

1、新增全域性方法或者屬性,如: vue-custom-element。

2、新增全域性資源:指令/過濾器/過渡等,如 vue-touch。

3、通過全域性 mixin 方法新增一些元件選項,如: vue-router。

4、新增 vue 例項方法,通過把它們新增到 vue.prototype 上實現。

5、乙個庫,提供自己的 api,同時提供上面提到的乙個或多個功能,如 vue-router。

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

myplugin.install = function (vue, options) 

// 2. 新增全域性資源

vue.directive('my-directive',

...})

// 3. 注入元件

vue.mixin(

...})

// 4. 新增例項方法

vue.prototype.$mymethod = function (methodoptions)

}

其核心還是通過prototype來新增方法和屬性。

// 呼叫 `myplugin.install(vue)`

vue.use(myplugin)

//也可以傳入乙個選項物件:

vue.use(myplugin, )

vue.use 會自動阻止多次註冊相同外掛程式,屆時只會註冊一次該外掛程式。

此處有大量好用的外掛程式和庫 --> awesome-vue

待續……

vue外掛程式開發

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

Vue 外掛程式開發

vue.js 的外掛程式應當有乙個公開方法 install 這個方法的第乙個引數是 vue 構造器 第二個引數是乙個可選的選項物件 myplugin.install function vue,options vue.directive my directive vue.mixin vue.proto...

vue開發外掛程式

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