背景

项目中用到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发布成功

在线体验