背景

项目中用到element-ui,里面用到了弹出组件,但是效果不太满意,于是自己就想写一个简单的弹出组件。目前已经发布到npm:可以通过npm i dialog-wxy -s 进行下载使用
页面调用效果:在线查看
图片描述

实现步骤

第一步 搭建vue简单工程

vue init webpack-simple dialog-wxy

创建好工程,在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({}),就可以 调用了!
具体插件内部实现可以看 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
开发第一个VUE插件-脚本宝典
发布成功

在线体验

插件使用效果

本文固定链接: http://www.js-code.com/vue-js/vue-js_24966.html