VUE自定義外掛程式庫及NPM整合

元件：對某功能或某模組的封裝

外掛程式：對一系列元件的封裝

關係：外掛程式可以封裝元件，元件暴露資料給外掛程式

install ,vue例項，mixin(vue3.0已不推薦使用)，directive

src目錄下建立plugins資料夾

plugins資料夾下建立元件資料夾，如msg

msg下建立msg.vue（元件的完整模板）

}

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 

import vuemsg from './plugins/index.js'

vue.use(vuemsg)

this.$refs.msg.msgplugin("test", 2000)

"name": "vue-plugins-demo",  // 外掛程式名稱

"private": false, // 是否私有，一定改為非私有false
"description": "", // 外掛程式描述
"license": "mit", // 開源協議
"main": 'lib/vue-plugins-demo.umd.min.js' // 入口檔案，打包後lib資料夾下
"script": 

npm run lib

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...