背景

專案中用到element-ui,裡面用到了彈出元件，但是效果不太滿意，於是自己就想寫一個簡單的彈出元件。目前已經發布到npm：可以通過npm i dialog-wxy -s 進行下載使用頁面呼叫效果：

實現步驟

第一步 搭建vue簡單工程

vue init webpack-simple dialog-wxy

建立好工程，在src 同層目錄 新建資料夾 lib 用來編寫原始碼：如圖：

開始code 外掛

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

在 main.js 使用的時候，直接 Vue.use() 就行，這樣我們就在vue 的原型鏈上 增加$alert() 方法，vue檔案通過 this.$alert({}),就可以 呼叫了！具體外掛內部實現可以看 github：

修改配置檔案

修改 webpack.config.js 檔案 中對應的 輸入， 輸出 ：

  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 設為 公共，main 是主入口

釋出

設定完 我們就可以 進行釋出了，首先 註冊npm 賬號，然後開啟本地git bash輸入npm login： 依據提示： 輸入 名稱，密碼，以及郵箱：在外掛目錄，對vue 進行編譯： npm run build,編譯完成，進行釋出：npm publish釋出成功

線上體驗