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

这篇文章简单介绍了 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>
除特殊说明外本人博客均属原创,转载请注明出处:http://blog.johnhan.cn/blog_1080.html
京ICP备19044523号-1