抽空简单研究了下vue的插件开发基础，写了一个用于弹窗通知的小插件练手，插件链接：vue-mini-toast。
1. 项目搭建
使用vue脚手架为最新3.0版本（需安装/升级），快速创建项目：
vue create vue-toast
最新版3.0脚手架自带可视化工具，可便于管理和配置vue项目，创建时的选项请参考@vue/cli3.0官网。另外webpack等配置方式也相对2.*版本有所不同。
2. 创建插件
删除Hello等无用的component文件，在src下新建lib文件夹用于存放插件源码文件。插件包含popup，alert，confirm，actionSheet方法，以下代码以其中的confirm为例，其它都同理。
在lib文件夹下新建index.js作为插件的启动初始文件，src/lib/index.js：
// 导入组件（下面说明）
import confirmPlugin from './Confirm'
const plugin = {
// vue插件需要的install方法
install: function (Vue) {
// 创建一个继承自我们vue组件的vue实例
let confirm = new (Vue.extend(confirmPlugin));
// 获取到实例挂载的dom，插入到body中
document.getElementsByTagName('body')[0].appendChild(confirm.$mount().$el);
// 在vue原型上创建一个供全局使用的方法
Vue.prototype.$confirm = (option, callback) => {
if (typeof option === 'object') {
// 合并传入的方法配置项，传递给confirm组件实例，这样通过this.$confirm()传递的配置就能反映到我们的vue组件中了
confirm.option = {...confirm.option, ...option};
}
confirm.callback = (index) => {
// 传入的回调函数，回调参数index为点击的按钮序号
callback && callback(index);
};
// 显示confirm弹窗
confirm.isShow = true;
};
}
};
// 支持script标签引入
if (typeof window !== 'undefined' && window.Vue) {
window.Vue.use(plugin);
}
export default plugin
在lib文件夹下新建Confirm.vue作为插件组件，代码很简单（不是必须，你可以直接在index.js中使用new Vue()创建，甚至不用vue实现） ，src/lib/Confirm.vue：
<template>
<transition name="fade">
<div class="alert_wrapper" v-show="isShow">
<transition name="pop">
<div class="alert_cont" v-show="isShow">
<div class="cont">
<div class="title">{{option.title}}</div>
<p class="msg">{{option.msg}}</p>
</div>
<div class="btn_list">
<div class="btn_item" v-for="item,index in option.btn" :key="index" :style="{color: option.btnColor[index]}" @click="isShow=false;callback(index)">{{item}}</div>
</div>
</div>
</transition>
</div>
</transition>
</template>
<script>
export default {
name: "confirm",
data() {
return {
// 默认的配置参数，this.$confirm()传递的配置覆盖于此
option: {
title: '提示',
msg: '确定操作？',
btn: ['确定', '取消'],
btnColor: ['#1f91f0', '#1f91f0']
},
isShow: false
}
},
methods: {
callback(index) {
}
}
}
</script>
<style scoped>
...
</style>
3. 本地测试
在main.js中引入并使用插件：
import Vue from 'vue'
import App from './App.vue'
import toast from './lib/index.js'
Vue.config.productionTip = false;
Vue.use(toast); // 插件需要use使用
new Vue({
render: h => h(App)
}).$mount('#app');
在App.vue写个点击调用this.$confirm()，并传入option对象和callback方法，运行npm run server即可，代码就不上了。测试没问题的话，就可以准备配置打包我们的插件了。
4. 配置打包
首先必然需要配置webpack。在@vue/cli脚手架3.0中，项目根目录新建vue.config.js文件作为项目配置文件，可配置项很多很多，当然webpack配置也在其中：
const path = require('path');
let config = {};
if (process.env.NODE_ENV === 'production') {
config = {
configureWebpack: {
entry: './src/lib/index.js',
output: {
filename: 'vue-mini-toast.js', // 打包生成文件的名字
library: 'vue-mini-toast', // reqire引入的名字
libraryTarget: 'umd',
umdNamedDefine: true
},
},
css: {extract: false} // 小插件就不抽离样式为单独文件了，样式直接包含在打包后的js中
};
}
module.exports = config;
然后配置package.json：
{
"name": "vue-mini-toast",
"author": "duhang",
"version": "1.0.1", // 以后更新插件时，此处版本号须改为不能与线上一样
"description": "A popup/alert plugin for Vue",
"license": "MIT",
"private": false, // 注意private改为false才能发布
"main": "dist/vue-mini-toast.common.js", // 打包后只需reqire上面webpack配置的插件名，会找到此真实文件
"repository": {
"type": "git",
"url": "https://github.com/duhang666/vue-mini-toast"
},
"homepage": "https://www.doinblog.com",
"keywords": [
"vue",
"toast"
],
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build --target lib --name vue-mini-toast src/lib/index.js" // 脚手架3.0中使用此命令单独打包插件入口文件，否则直接build会打包全局
},
"dependencies": {
"vue": "^2.5.17"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.0.0",
"@vue/cli-service": "^3.0.0",
"vue-template-compiler": "^2.5.17"
}
}
另外建议还是把markdown写上，提供api参数配置信息，方便阅读使用。
5. 发布至npm仓库
首先到npm仓库官网注册账号，老套的下一步下一步激活，总之注册很简单就不说了。🤤
项目根目录下使用命令登录你的npm账户：
npm adduser
输入账号密码邮箱就可以了，登陆成功后使用以下命令发布你的插件：
npm publish
不出意外的话，现在可以在npm仓库找到我们刚发布的插件了。然后安装线上插件：
npm i vue-mini-toast -S最后将main.js中插件引入改为require('vue-mini-toast')。大功告成，愉快的使用吧。
初出茅庐，还需要多多学习。最后贴上刚自主搭建的博客，欢迎来访指点：链接
