Vue插件如何實(shí)現(xiàn)從封裝到發(fā)布-創(chuàng)新互聯(lián)

這篇文章主要介紹Vue插件如何實(shí)現(xiàn)從封裝到發(fā)布，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

我們擁有十多年網(wǎng)頁設(shè)計(jì)和網(wǎng)站建設(shè)經(jīng)驗(yàn)，從網(wǎng)站策劃到網(wǎng)站制作，我們的網(wǎng)頁設(shè)計(jì)師為您提供的解決方案。為企業(yè)提供成都網(wǎng)站制作、成都網(wǎng)站建設(shè)、外貿(mào)營銷網(wǎng)站建設(shè)、微信開發(fā)、微信小程序、手機(jī)網(wǎng)站制作、H5網(wǎng)站設(shè)計(jì)、等業(yè)務(wù)。無論您有什么樣的網(wǎng)站設(shè)計(jì)或者設(shè)計(jì)方案要求，我們都將富于創(chuàng)造性的提供專業(yè)設(shè)計(jì)服務(wù)并滿足您的需求。

插件的分類

• 添加全局的方法或者屬性 比如：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)對(duì)象：
``` javascript
Vue.use(MyPlugin, { someOption: true })

插件開發(fā)

Vue.js 的插件有一個(gè)公開方法 install。這個(gè)方法的第一個(gè)參數(shù)是 Vue 構(gòu)造器，第二個(gè)參數(shù)是一個(gè)可選的選項(xiàng)對(duì)象：

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方法的插件對(duì)象

代碼如下:

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)容，填對(duì)就行
  "type": "git",
  "url": "https://github.com/icebluesky2666/weibo-emoji"
 },
 "description": "A Weibo emoji plugn",// 描述
 "version": "1.0.2",// 版本
 "author": "jhqin",// 作者
 "license": "MIT",// license 類型

對(duì)于多次發(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>

效果：

以上是“Vue插件如何實(shí)現(xiàn)從封裝到發(fā)布”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

分享名稱：Vue插件如何實(shí)現(xiàn)從封裝到發(fā)布-創(chuàng)新互聯(lián)
瀏覽地址：http://bm7419.com/article28/gdcjp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、Google、外貿(mào)網(wǎng)站建設(shè)、響應(yīng)式網(wǎng)站、網(wǎng)站維護(hù)、網(wǎng)站營銷

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)