Vue外掛從封裝到釋出

天微蔚藍發表於2019-02-27
Vue封裝

外掛的分類

  • 新增全域性的方法或者屬性 比如：vue-element
  • 新增全域性的資源 比如：指令 v-bind
  • 通過mixin方法新增的一些混合
  • 新增Vue例項方法 Vue.prototype上面

外掛的使用

通過全域性方法 Vue.use() 使用外掛。它需要在你呼叫 new Vue() 啟動應用之前完成：

// 呼叫 `MyPlugin.install(Vue)`
Vue.use(MyPlugin)

new Vue({
  //... options
})```

也可以傳入一個選項物件：
``` javascript
Vue.use(MyPlugin, { someOption: true })
複製程式碼

外掛開發

Vue.js 的外掛有一個公開方法 install。這個方法的第一個引數是 Vue 構造器，第二個引數是一個可選的選項物件：

MyPlugin.install = function (Vue, options) {
  // 1. 新增全域性方法或屬性
  Vue.myGlobalMethod = function () {
    // 邏輯...
  }

  // 2. 新增全域性資源
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 邏輯...
    }
    ...
  })

  // 3. 注入元件
  Vue.mixin({
    created: function () {
      // 邏輯...
    }
    ...
  })

  // 4. 新增例項方法
  Vue.prototype.$myMethod = function (methodOptions) {
    // 邏輯...
  }

  //5.直接註冊元件
  Vue.use();
}
複製程式碼

其實無論採用什麼方式，最終的目的則是在專案中可以使用，藉助install 的Vue引數具體自己進行封裝

從零開始的元件封裝

需求： 封裝一個微博表情的enoji外掛

準備

node環境 vue環境 vue-cli腳手架 等等

建立工程

使用vue init 建立簡單腳手架，簡單修改就可以適合外掛開發

vue init webpack-simple weibo-emoji

cd weibo-emoji

npm install

開發目錄如下:

專案目錄

外掛實現

專案具體邏輯實現可以去這裡檢視原始碼 我們正常webpack的entry入口一般會設定為main.js 做一些依賴引入和檢視掛載等的操作, 當我們編寫外掛的時候理所當然的就會省去掛載這一步操作了。 這裡我們可以將index.js作為我們的入口檔案，暴露出去的則是一個有這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 
複製程式碼

釋出

  1. 釋出之前檢查一下webconfig配置：
    entry: './src/index.js',// 入口
    output: {
        path: path.resolve(__dirname, './dist'),//打包輸出目錄
        publicPath: '/dist/',// 靜態資源字首
        filename: 'vue-weibo-emoji.js', //打包生成檔案的名字
        library: 'WeiboEmoji', //umd 打包的時候模組的名字
        libraryTarget: 'umd',//打包方式 amd
        umdNamedDefine: true //打包未定義的時候使用預設名字
    },
複製程式碼
  1. 檢查釋出配置：
    "name": "weibo-emoji", // 打包的專案名，也就是modemodules裡面的資料夾名字 也就是import from之後跟的名字
    "main": "dist/vue-weibo-emoji.js", // 是訪問到nodemodules依賴，實際引入的檔案 相當於入口
    "repository": {// 倉庫 貌似倉庫內容也不影響釋出內容，填對就行
        "type": "git",
        "url": "https://github.com/icebluesky2666/weibo-emoji"
    },
    "description": "A Weibo emoji plugn",// 描述
    "version": "1.0.2",// 版本
    "author": "jhqin",// 作者
    "license": "MIT",// license 型別
複製程式碼

對於多次釋出，必須每次的版本號都不同

  1. 最後：
  npm build
  npm login
  npm publish
複製程式碼

使用

npm install weibo-emoji
import WeiboEmoji from 'weibo-emoji'
Vue.use(WeiboEmoji)
複製程式碼
<weibo-emoji class="emoji" :weiboIcon="weiboIcon" @changeEmoji="selsctEmoji = arguments[0].phrase" ref="emoji"> </weibo-emoji>
複製程式碼

效果：

效果圖

原始碼

Weibo-Emoji

經驗所致，如有錯誤，歡迎指正！

相關文章