开发一个 vue 插件，发布到npm并且，可以使用 npm 安装。
vue list 查看当前在线的模板信息
步骤如下：
初始化项目
运行项目：
npm installnpm run dev
写插件
在 src 文件夹下面建 lib 文件夹，用于存放插件。lib 文件夹下再建 toast.js 和 toast.vue 两个文件。整个项目目录如下所示：
toast.vue 的内容如下：
<div class="vue-toast-wraper" v-show="isShow">{{msg}}</div></template><script>export default {name:'toast',props:{msg:{default:"",type:String},isShow:{default:false,type:Boolean}},mounted(){if(this.isShow){setTimeout(() => {this.isShow = false},2500);}}}</script><style scoped>.vue-toast-wraper{background: rgba(0, 0, 0, 0.6);color: #fff;font-size: 17px;padding: 10px;border-radius:12px;display: -webkit-box;-webkit-box-pack: center;-webkit-box-align: center;position: fixed;top: 50%;left: 50%;z-index: 2000;-webkit-transform: translateY(-50%);transform: translateY(-50%);-webkit-transform: translateX(-50%);transform: translateX(-50%);}</style>
toast.vue 是做一个 弹出提示，其中传入的参数有两个：toastMsg 和 isSHowToast，分别表示 提示消息以及是否显示提示。
toast.js 中写 install 方法，内容如下：
const toastPlugin = {install: function(Vue) {ponent(VueToastPlugin.name, VueToastPlugin)}}// global 情况下 自动安装if (typeof window !== 'undefined' && window.Vue) {window.Vue.use(toastPlugin)}// 导出模块export default toastPlugin
本地测试
本插件的功能就这么多，因为我们尚未发布，所以先进行本地测试。
3.1 将 App.vue 多余代码删除。
3.2 在 main.js 中引入
import App from './App.vue'import Toast from './lib/toast.js'Vue.use(Toast)new Vue({el: '#app',render: h => h(App)})
3.3 在 App.vue 中使用 toast （别忘记需要传递的参数）
<div id="app"><toast :msg = "'测试'" :isShow = "true"/></div></template><script>export default {name: 'app'}</script><style lang="scss"></style>
3.4 本地测试的结果，如图，是所期望的
配置打包
本地测试没有问题过后，我们就可以准备一下修改配置，为打包发布做准备。
4.1 修改 webpack.config.js
4.2 修改 package.json
4.3 修改 .gitignore 文件
去掉 dist。
4.4 修改 index.html文件
<div id="app"></div><script src="/dist/toast.js"></script></body>
4.5 项目打包
在npm上发布
5.1 注册npm账号
移步 npm 官网。
5.2 本地控制台登录 npm 账号
5.3 发布
自己是一个五年的全栈工程师，这里推荐一下我的前端学习交流群：731771211，里面都是学习前端的，群里会不定期更新最新的教程和学习方法，有想学习web前端的，或是转行，或是大学生，还有工作中想提升自己能力的web前端党欢迎加入。点击：加入
如果觉得《初探 vue 插件开发》对你有帮助，请点赞、收藏，并留下你的观点哦！
