前言
打算学习一下vue插件的开发和发布流程，查了许多教程，但是按照教程操作时还是遇到了许多问题，本篇博客就整理下插件开发过程以及注意事项。
一、初始化项目
vue init webpack-simple zseditor
使用vue创建一个简单的项目，删除src中除了main.js和app.vue外的文件，清空app.vue中无用内容，并在src目录下创建lib文件夹，整理后的项目目录如下：
项目目录
二、运行项目
cd zseditor
npm install
npm run dev
三、编写插件
1、在lib文件夹下新建两个文件，index.js以及zseditor.vue
插件目录
2、zseditor.vue
具体的组件代码就不写了
<template>
<div>插件测试</div>
</template>
<script>
export default {
name:'zseditor'
}
</script>
3、index.js
import zseditor from './zseditor'
const editor = {
install(Vue, options) {
Vue.component(zseditor.name, zseditor)
}
}
if (typeof window !== 'undefined' && window.Vue) {
window.Vue.use(editor);
}
export default editor
四、调试代码
在main.js中引入组件，并在App.vue中填加组件测试
1、main.js
import zsEditor from './lib/index.js'
Vue.use(zsEditor)
2、App.vue
<template>
<div id="app">
<zs-editor></zs-editor>
</div>
</template>
<script>
export default {
name: "app"
}
</script>
五、发布插件
1、拷贝一份webpack.config.js，命名为webpack.dist.config.js，修改相关参数
许多教程中直接修改了webpack.config.js，导致'entry'入口被修改了，无法运行npm run dev进行本地调试，这里将打包配置分开，可以不影响本地的调试。
配置文件
webpack.dist.config.js
2、修改package.json配置文件
这里的main参数许多教程中并没有强调，需要配置成打包后的文件路径，不然会导致上传的插件，下载后无法引用
package.json
3、发布插件
npm login // 登录，没有账号要去npm官网注册
npm publish
六、下载测试
1、下载
npm install zseditor --save
2、在main.js中引用插件
import zseditor from 'zseditor'
Vue.use(zseditor)
3、在App.vue中添加组件
<zseditor></zseditor>
