这篇文章简单介绍了 vue 插件的开发、发布、安装的整个流程,文章重流程轻插件开发,需要详细了解 vue 插件开发的同学可以移步下面的链接
使用 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
调整后的目录结构如下(忽略 node_module 和 .git 文件夹):
├─.eslintignore
├─.gitignore
├─babel.config.js
├─package-lock.json
├─package.json
├─vue.config.js
├─src
| ├─main.js
| └VuePlugin.vue
修改 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
完成上面两大步以后,再发布就能使用 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
最后一步就是发布该插件到 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
插件安装
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>