Vue插件從封裝到發(fā)布的完整步驟記錄
插件的分類
- 添加全局的方法或者屬性 比如:vue-element
- 添加全局的資源 比如:指令 v-bind
- 通過mixin方法添加的一些混合
- 添加Vue實(shí)例方法 Vue.prototype上面
插件的使用
通過全局方法 Vue.use() 使用插件。它需要在你調(diào)用 new Vue() 啟動(dòng)應(yīng)用之前完成:
// 調(diào)用 `MyPlugin.install(Vue)`
Vue.use(MyPlugin)
new Vue({
//... options
})```
也可以傳入一個(gè)選項(xiàng)對象:
``` javascript
Vue.use(MyPlugin, { someOption: true })
插件開發(fā)
Vue.js 的插件有一個(gè)公開方法 install。這個(gè)方法的第一個(gè)參數(shù)是 Vue 構(gòu)造器,第二個(gè)參數(shù)是一個(gè)可選的選項(xiàng)對象:
MyPlugin.install = function (Vue, options) {
// 1. 添加全局方法或?qū)傩?
Vue.myGlobalMethod = function () {
// 邏輯...
}
// 2. 添加全局資源
Vue.directive('my-directive', {
bind (el, binding, vnode, oldVnode) {
// 邏輯...
}
...
})
// 3. 注入組件
Vue.mixin({
created: function () {
// 邏輯...
}
...
})
// 4. 添加實(shí)例方法
Vue.prototype.$myMethod = function (methodOptions) {
// 邏輯...
}
//5.直接注冊組件
Vue.use();
}
其實(shí)無論采用什么方式,最終的目的則是在項(xiàng)目中可以使用,借助install 的Vue參數(shù)具體自己進(jìn)行封裝
從零開始的組件封裝
需求: 封裝一個(gè)微博表情的enoji插件
準(zhǔn)備
node環(huán)境 vue環(huán)境 vue-cli腳手架 等等
創(chuàng)建工程
使用vue init 創(chuàng)建簡單腳手架,簡單修改就可以適合插件開發(fā)
vue init webpack-simple weibo-emoji cd weibo-emoji npm install
開發(fā)目錄如下:

插件實(shí)現(xiàn)
項(xiàng)目具體邏輯實(shí)現(xiàn)可以去這里查看源碼
我們正常webpack的entry入口一般會(huì)設(shè)置為main.js 做一些依賴引入和視圖掛載等的操作,當(dāng)我們編寫插件的時(shí)候理所當(dāng)然的就會(huì)省去掛載這一步操作了。
這里我們可以將index.js作為我們的入口文件,暴露出去的則是一個(gè)有這install方法的插件對象
代碼如下:
import weiboEmoji from './compontent/weibo_emoji'
const emoji = {
install(Vue, options) {
Vue.component(weiboEmoji.name, weiboEmoji);
}
}
if (typeof window !== 'undefined' && window.Vue) {
window.Vue.use(emoji);
}
export default emoji
發(fā)布
發(fā)布之前檢查一下webconfig配置:
entry: './src/index.js',// 入口
output: {
path: path.resolve(__dirname, './dist'),//打包輸出目錄
publicPath: '/dist/',// 靜態(tài)資源前綴
filename: 'vue-weibo-emoji.js', //打包生成文件的名字
library: 'WeiboEmoji', //umd 打包的時(shí)候模塊的名字
libraryTarget: 'umd',//打包方式 amd
umdNamedDefine: true //打包未定義的時(shí)候使用默認(rèn)名字
},
檢查發(fā)布配置:
"name": "weibo-emoji", // 打包的項(xiàng)目名,也就是modemodules里面的文件夾名字 也就是import from之后跟的名字
"main": "dist/vue-weibo-emoji.js", // 是訪問到nodemodules依賴,實(shí)際引入的文件 相當(dāng)于入口
"repository": {// 倉庫 貌似倉庫內(nèi)容也不影響發(fā)布內(nèi)容,填對就行
"type": "git",
"url": "https://github.com/icebluesky2666/weibo-emoji"
},
"description": "A Weibo emoji plugn",// 描述
"version": "1.0.2",// 版本
"author": "jhqin",// 作者
"license": "MIT",// license 類型
對于多次發(fā)布,必須每次的版本號(hào)都不同
最后:
npm build npm login npm publish
使用
import WeiboEmoji from 'weibo-emoji' Vue.use(WeiboEmoji)
<weibo-emoji class="emoji" :weiboIcon="weiboIcon" @changeEmoji="selsctEmoji = arguments[0].phrase" ref="emoji"> </weibo-emoji>
效果:

源碼
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,如果有疑問大家可以留言交流,謝謝大家對腳本之家的支持。
- vue自定義插件封裝,實(shí)現(xiàn)簡易的elementUi的Message和MessageBox的示例
- vue簡單封裝axios插件和接口的統(tǒng)一管理操作示例
- 環(huán)形加載進(jìn)度條封裝(Vue插件版和原生js版)
- Vue使用zTree插件封裝樹組件操作示例
- Vue封裝的可編輯表格插件方法
- vue移動(dòng)端微信授權(quán)登錄插件封裝的實(shí)例
- Vue二次封裝axios為插件使用詳解
- 第一個(gè)Vue插件從封裝到發(fā)布
- 用vue封裝插件并發(fā)布到npm的方法步驟
- vue封裝第三方插件并發(fā)布到npm的方法
- bootstrap select插件封裝成Vue2.0組件
- vue3.0實(shí)現(xiàn)插件封裝
相關(guān)文章
vue項(xiàng)目初始化過程中錯(cuò)誤總結(jié)
在Vue.js項(xiàng)目初始化和構(gòu)建過程中,可能會(huì)遇到多種問題,首先,npm?install過程中報(bào)錯(cuò),如提示“No?such?file?or?directory”,建議刪除package-lock.json文件后重新安裝,在build或run時(shí),若出現(xiàn)core-js相關(guān)錯(cuò)誤2024-09-09
Vue使用fabric.js實(shí)現(xiàn)局部截圖與大圖預(yù)覽功能
這篇文章主要為大家詳細(xì)介紹了Vue如何使用fabric.js實(shí)現(xiàn)局部截圖與el-image-viewer大圖預(yù)覽功能,文中的示例代碼講解詳細(xì),感興趣的可以了解下2024-02-02
淺談Vue2.4.0 $attrs與inheritAttrs的具體使用
這篇文章主要介紹了淺談Vue2.4.0 $attrs與inheritAttrs的具體使用,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
flutter使用tauri實(shí)現(xiàn)一個(gè)一鍵視頻轉(zhuǎn)4K軟件
這篇文章主要為大家介紹了flutter使用tauri實(shí)現(xiàn)一個(gè)一鍵視頻轉(zhuǎn)4K軟件詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09
vue后臺(tái)管理如何配置動(dòng)態(tài)路由菜單
這篇文章主要介紹了vue后臺(tái)管理如何配置動(dòng)態(tài)路由菜單,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04

