前言

打算學(xué)習(xí)一下vue插件的開(kāi)發(fā)和發(fā)布流程，查了許多教程，但是按照教程操作時(shí)還是遇到了許多問(wèn)題，本篇博客就整理下插件開(kāi)發(fā)過(guò)程以及注意事項(xiàng)。

一、初始化項(xiàng)目

vue init webpack-simple zseditor

使用vue創(chuàng)建一個(gè)簡(jiǎn)單的項(xiàng)目，刪除src中除了main.js和app.vue外的文件，清空app.vue中無(wú)用內(nèi)容，并在src目錄下創(chuàng)建lib文件夾，整理后的項(xiàng)目目錄如下：

項(xiàng)目目錄

二、運(yùn)行項(xiàng)目

cd zseditor
npm install
npm run dev

三、編寫(xiě)插件

1、在lib文件夾下新建兩個(gè)文件，index.js以及zseditor.vue

插件目錄

2、zseditor.vue
具體的組件代碼就不寫(xiě)了

<template>
    <div>插件測(cè)試</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

四、調(diào)試代碼

在main.js中引入組件，并在App.vue中填加組件測(cè)試
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>

五、發(fā)布插件

1、拷貝一份webpack.config.js，命名為webpack.dist.config.js，修改相關(guān)參數(shù)
許多教程中直接修改了webpack.config.js，導(dǎo)致'entry'入口被修改了，無(wú)法運(yùn)行npm run dev進(jìn)行本地調(diào)試，這里將打包配置分開(kāi)，可以不影響本地的調(diào)試。

配置文件

webpack.dist.config.js

2、修改package.json配置文件
這里的main參數(shù)許多教程中并沒(méi)有強(qiáng)調(diào)，需要配置成打包后的文件路徑，不然會(huì)導(dǎo)致上傳的插件，下載后無(wú)法引用

package.json

3、發(fā)布插件

npm login // 登錄，沒(méi)有賬號(hào)要去npm官網(wǎng)注冊(cè)

npm publish

六、下載測(cè)試

1、下載

npm install zseditor --save

2、在main.js中引用插件

import zseditor from 'zseditor'
Vue.use(zseditor)

3、在App.vue中添加組件

<zseditor></zseditor>