VUE插件开发及发布

前言

打算学习一下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>