简述 vue 插件的开发、发布、安装的整个流程

这篇文章简单介绍了 vue 插件的开发、发布、安装的整个流程，文章重流程轻插件开发，需要详细了解 vue 插件开发的同学可以移步下面的链接

step 1

使用 vue 官方脚手架工具快速搭建一个项目（鄙人用的 vue-cli 3.0）

vue create vue-publish-test

没有安装脚手架的同学可以先安装一个，花不了多少网费

npm install -g @vue/cli

项目创建完成后初始目录结构长这样（忽略 node_module 和 .git 文件夹）：

├─.gitignore
├─babel.config.js
├─package-lock.json
├─package.json
├─src
|  ├─App.vue
|  ├─main.js
|  ├─components
|  |     └HelloWorld.vue
|  ├─assets
|  |   └logo.png
├─public
|   ├─favicon.ico
|   └index.html

本次演示流程用不上 public、components 和 assets 文件夹，删之
src 目录下的 App.vue 重命名为 VuePlugin.vue
根目录下新增一个 vue.config.js 文件
根目录下新增一个 .eslintignore 文件

调整后的目录结构如下（忽略 node_module 和 .git 文件夹）：

├─.eslintignore
├─.gitignore
├─babel.config.js
├─package-lock.json
├─package.json
├─vue.config.js
├─src
|  ├─main.js
|  └VuePlugin.vue

step 2

修改 VuePlugin.vue 文件如下：

<template>
  <div>Hello World!</div>
</template>

该文件就是一个超简单的 vue 组件，可以直接发布了，不过这样发布就不能通过 vue.use 的方式去使用了

接下来修改 src/main.js 文件如下：

import VuePlugin from './VuePlugin.vue'

export default {
  install (Vue) {
    Vue.component('VuePublishTest', VuePlugin)
  }
}

在 vue.config.js 文件中下写入下面的代码

module.exports = {
  productionSourceMap: false,
  configureWebpack: config => {
    // build 的时候不把 vue 打进包里，不然包会很大
    if (process.env.NODE_ENV === 'production') {
      config.externals = {
        'vue': 'Vue'
      }
    }
  }
}

最后还要修改一下 package.json 中的 "scripts" 字段，指定构建结果为库文件

"scripts": {
  "build": "vue-cli-service build --target lib --name vue-publish-test src/main.js"
}

执行 npm run build 后，项目根目录下新增了一个 dist 文件夹，我们要的库文件就在这个文件夹下面

├─.eslintignore
├─.gitignore
├─babel.config.js
├─package-lock.json
├─package.json
├─vue.config.js
├─src
|  ├─main.js
|  └VuePlugin.vue
├─dist
|  ├─demo.html
|  ├─vue-publish-test.common.js
|  ├─vue-publish-test.umd.js
|  └vue-publish-test.umd.min.js

step 3

完成上面两大步以后，再发布就能使用 vue.use 的方式来引用插件了

但是一般在发布之前，都会本地自测一下写的插件

新增一个 test 文件夹，文件夹下新增 test.vue 和 main.js 两个文件，目录变更后如下：

├─.eslintignore
├─.gitignore
├─babel.config.js
├─package-lock.json
├─package.json
├─vue.config.js
├─test
|  ├─main.js
|  └test.vue
├─src
|  ├─main.js
|  └VuePlugin.vue
├─dist
|  ├─demo.html
|  ├─vue-publish-test.common.js
|  ├─vue-publish-test.umd.js
|  └vue-publish-test.umd.min.js

在 test.vue 文件中添加如下代码：

<template>
  <div>
    <vue-publish-test></vue-publish-test>
  </div>
</template>

在 test/main.js 文件中添加如下代码：

// 打包前的组件测试
// import VuePublishTest from '../src/main.js'
// 打包后的组件测试
import VuePublishTest from '../dist/vue-publish-test.umd.js'
import Vue from 'vue'
import Test from './test.vue'

Vue.use(VuePublishTest)

new Vue({
  render: h => h(Test),
}).$mount('#app')

最后再修改一下 package.json 中的 "scripts" 字段，指定调试时的入口文件为 test 文件夹下的 main.js 文件

"scripts": {
  "test": "vue-cli-service serve test/main.js",
  "build": "vue-cli-service build --target lib --name vue-publish-test src/main.js"
}

执行 npm run test 命令，不出意外的话，屏幕上就会显示 Hello World！了

如果有 eslint 报错影响了本地测试，在 .eslintignore 文件中写入下面一行后重新执行命令就可以了

dist

step 4

最后一步就是发布该插件到 npmjs 上了，发布之前需要处理一些细节：

package.json 文件中添加 "main" 字段，用于指定安装文件为库文件

"main": "dist/vue-publish-test.umd.js",

删除 package.json 文件中的 "private" 字段，不然发布不了

删除 .gitignore 文件中的 "/dist", 不然 dist 目录不会发布上去

根据自身需要在 package.json 中添加 "keywords"、"license"、"repository" 等字段，字段具体含义此处不做解释

根据自身需要在项目根目录下添加 LISENCE、README.md 文件，文件具体含义此处不做解释

如果当前镜像源不是 npm 的源，则需要改成 npm 源

npm set registry https://registry.npmjs.org/

执行 npm login 命令登录，如果没有 npmjs 的账号那就要先去注册一个了

在账号密码都输入正确的情况下如果登录失败可尝试一下更新 npm

npm install -g npm

执行 npm publish 命令进行发布

以后每次重新发布新版本都需要更新一下 package.json 文件中的 "version" 字段

发布好了以后去 npmjs 官网看看吧(#^.^#)

如果未来的某一天想取消该插件的发布，可执行下面的命令（@后面为插件版本号）：

npm unpublish vue-publish-test@0.1.0

step 5

插件安装

npm i vue-publish-test

插件使用

import Vue from 'vue'
import VuePublishTest from 'vue-publish-test'
Vue.use(VuePublishTest)

示例

<template>
<div>
  <vue-publish-test></vue-publish-test>
</div>
</template>