開發(fā)第一個VUE插件

stdying 發(fā)布于2019-08-02 16:06 / 863人閱讀

摘要：背景項目中用到里面用到了彈出組件，但是效果不太滿意，于是自己就想寫一個簡單的彈出組件。

背景

項目中用到element-ui,里面用到了彈出組件，但是效果不太滿意，于是自己就想寫一個簡單的彈出組件。目前已經(jīng)發(fā)布到npm：可以通過npm i dialog-wxy -s 進行下載使用
頁面調(diào)用效果：在線查看

實現(xiàn)步驟 第一步搭建vue簡單工程

vue init webpack-simple dialog-wxy

創(chuàng)建好工程，在src 同層目錄新建文件夾 lib 用來編寫源碼：如圖：

開始code 插件

插件寫法，具體參考 https://cn.vuejs.org/v2/guide...
這里
我們最終暴露出來的：

export default {
  install (Vue, options) {
    Vue.prototype.$alert = Alert
  }
}

在 main.js 使用的時候，直接 Vue.use() 就行，這樣我們就在vue 的原型鏈上增加$alert() 方法，vue文件通過 this.$alert({}),就可以調(diào)用了！
具體插件內(nèi)部實現(xiàn)可以看 github：插件源碼

修改配置文件

修改 webpack.config.js 文件 中對應(yīng)的 輸入， 輸出 ：

  entry: "./lib/index.js",
  output: {
    path: path.resolve(__dirname, "./dist"),
    publicPath: "/dist/",
    filename: "dialog-wxy.js",
    library: "dialog-wxy", 
    libraryTarget: "umd", // 很重要，保證能通過import 進行引用
    umdNamedDefine: true
  },

修改package.json
修改這幾處：

  "license": "MIT",
  "private": false,
  "main": "dist/dialog-wxy.js",

private 設(shè)為 公共，main 是主入口

發(fā)布

設(shè)置完我們就可以進行發(fā)布了，首先注冊npm 賬號，然后打開本地git bash
輸入npm login：依據(jù)提示：輸入名稱，密碼，以及郵箱：
在插件目錄，對vue 進行編譯： npm run build,
編譯完成，進行發(fā)布：npm publish

發(fā)布成功

在線體驗

插件使用效果