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 //打包未定義的時候使用默認名字
    },
複製代碼

2. 檢查發佈配置：

"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 類型
複製代碼

對於屢次發佈，必須每次的版本號都不一樣

3. 最後：

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

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