元件:對某功能或某模組的封裝
外掛程式:對一系列元件的封裝
關係:外掛程式可以封裝元件,元件暴露資料給外掛程式
install ,vue例項,mixin(vue3.0已不推薦使用),directive
src目錄下建立plugins資料夾
plugins資料夾下建立元件資料夾,如msg
msg下建立msg.vue(元件的完整模板)
}
plugins下建立index.js入口檔案
import msg from './msg/msg.vue'
let plugin =
plugin.install = function(vue)
// 自定義指令
vue.directive('focus'. ,
inserted: function(el)
})vue.component(msg.name, msg)
}export default plugin
const requirecomponent = require.context('./', true, /\.vue$/) //目錄,是否匹配子資料夾,文件型別
const install = (vue) => )
vue.directive('focus'. ,
inserted: function(el)
})}if (typeof window !== 'undefined' && window.vue)
export default
main.js引入並全域性註冊
import vuemsg from './plugins/index.js'
vue.use(vuemsg)
元件中使用外掛程式庫中的外掛程式
this.$refs.msg.msgplugin("test", 2000)
配置packag.json
"name": "vue-plugins-demo", // 外掛程式名稱
"private": false, // 是否私有,一定改為非私有false
"description": "", // 外掛程式描述
"license": "mit", // 開源協議
"main": 'lib/vue-plugins-demo.umd.min.js' // 入口檔案,打包後lib資料夾下
"script":
打包
npm run lib
發布到npm
npm login // 登入npm,無賬號需先註冊
username: // 輸入使用者名稱
password: // 輸入密碼
email: // 輸入郵箱
// 登入成功,發布即可
npm publish
專案中引用
npm i vue-plugins-demo
main.js中引入,注意必須引入css
Vue 自定義外掛程式及使用
外掛程式通常會為 vue 新增全域性功能。所謂全域性 即不需要像元件那樣,每次使用他前都需要先引入一次。對於外掛程式只要在最開始引入一次,在任何元件就可以直接使用。類似於我們在window上新增的方法屬性那樣,任何地方都可以用 外掛程式能實現的功能沒有限制,不過常見下面幾種 通過外掛程式,新增全域性...
自定義Vue外掛程式
在vue專案中,需要用到公共的方法時,可以將這些方法寫在外掛程式裡。在外掛程式裡可以自己定義全域性的變數,過濾器 指令 例項上的方法等。使用外掛程式可以為vue新增全域性功能,包括全域性方法或屬性 全域性資源 指令 過濾器 過渡等 通過全域性mixin方法新增一些元件選項 新增例項方法 新增庫 目前...
自定義Vue外掛程式
今天咱們來玩一下vue中的自定義元件,此案例直接通過script引入js的形式定義元件 我是簡單的寫了乙個彈出框的小外掛程式 css樣式 這就不需要解釋了吧,強擼 html結構 元件核心js var alert 此處的install方法 是vue中規定好的 alert.install functio...