Vue外掛程式plugins的基本操作

2022-01-17 06:17:10 字數 1296 閱讀 7721

本文將詳細介紹vue外掛程式plugins的基本操作

外掛程式通常會為 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)

}

通過全域性方法 vue.use() 使用外掛程式:

//

呼叫 `myplugin.install(vue)`

vue.use(myplugin)

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

vue.use(myplugin, )

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)

awesome-vue 集合了來自社群貢獻的數以千計的外掛程式和庫

webpack概念 外掛程式 Plugins

外掛程式是 wepback 的支柱功能。webpack 自身也是構建於,你在 webpack 配置中用到的相同的外掛程式系統之上!外掛程式目的在於解決 loader 無法實現的其他事。consolelogonbuildwebpackplugin.js function consolelogonbui...

Vue基本元件 外掛程式開發

一 元件和外掛程式的區別 外掛程式通常會為 vue 新增全域性功能。外掛程式的範圍沒有限制 一般有下面幾種 新增全域性方法或者屬性,如 vue custom element 新增全域性資源 指令 過濾器 過渡等,如 vue touch 通過全域性 mixin 方法新增一些元件選項,如 vue rou...

babel的plugins和presets解析

babel可以將當前執行平台 瀏覽器 node伺服器 尚不支援的下一代或幾代js語法編譯為當前支援的js語法版本,比如可以把es6 es7和es8的js 編譯為es5的 需要明確的幾個概念 plugin babel的外掛程式,在6.x版本之後babel必需要配合外掛程式來進行工作 preset ba...