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

2021-10-07 06:34:52 字數 1793 閱讀 9009

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

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

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

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