前言
使用Vue框架做前端开发，组件封装是一个很常规的操作。随着时间的积累，组件也会越来越多，配合vuepress可以解决组件文档的统一化，但依然解决不了组件的跨项目复用问题。一个公司中不可能只基于一个框架或项目开发，不同的业务或模块会另起项目，这时，如果是把项目的复用组件通过复制的方式引入另一项目，就显得麻烦，而且如果组件升级或修复bug，不能实时同步。
如何解决组件的跨项目复用，是每个团队都会面临的问题。就常见的就是把组件上传到npm仓库，这样不同的项目需要时直接从npm仓库中安装使用，如果组件升级或修复问题，其他项目同步更新就可以。如果不想公开，可以部署本地私有仓库，实现团队内共享。
前端组件发布到npm仓库，配合vuepress组件文档，可以解决前端组件的跨项目复用，提高前端效能
一、环境准备
1》创建组件目录
使用vue cli 创建一个新项目，这里不做详细介绍，可参考Vue CLI
项目目录如下：
2》创建group组件
group目录添加视图src/index.vue,并创建index.js负责对外提供install方法，
index.vue代码示例：
<template>
<p class="labelTitle" :name="name">
{
{
name }}<span v-if="tips" class="tips">({
{
tips }})</span>
</p>
</template>
<script>
export default {
name: 'CtjGroup',
/**
* ctj-group属性参数
* @property {string} [name] 分组名称
* @property {string} [tips] 补充说明，默认值空
*/
props: {
// 分组名称
name: {
type: String,
default: '分组名称',
},
// 补充信息
tips: {
type: String,
default: '',
},
},
data() {
return {
}
},
}
</script>
<style lang="css" scoped>
.labelTitle {
font-weight: bolder;
font-size: 16px;
border-left: 4px solid #1890ff;
padding-left: 4px;
}
.tips {
font-size: 12px;
color: #606266;
font-weight: 400;
padding-left: 4px;
}
</style>
group/index.js代码示例
import Module from './src/index.vue'
// 给组件定义install方法
Module.install = Vue => {
Vue.component(Module.name, Module)
}
export default Module
3》install方法
Vue.js 的插件应该暴露一个 install方法。这个方法的第一个参数是Vue 构造器，第二个参数是一个可选的选项对象。这里Vue官方对Vue插件的规范要求。
我们的组件想要被Vue.use引入，就必需提供install方法。
在package主目录下增加index.js
import group from './group'
const components = [group]
const install = Vue => {
// 判断组件是否安装，如果已经安装了就不在安装。
if (install.installed) return
install.installed = true
// 遍历的方式注册所有的组件
components.map(component => Vue.use(component))
}
// 检查vue是否安装，满足才执行
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue)
}
export default {
// 所有的组件必须有一个install的方法，才能通过Vue.use()进行按需注册
install,
...components,
}
到此，组件的准备工作已经完成，本地验证一下效果
直接在App.vue中引入组件即可
App.js代码如下：
<template>
<div id="app">
<!-- <img alt="Vue logo" src="./assets/logo.png" /> -->
<div class="main">
<Group :name="'三国演示'" :tips="'中国古典文学四大名著之一'"></Group>
<p>描写的是自东汉末年至魏、蜀、吴三国归晋期间的历史故事。它艺术地再现了激烈的农民起义、封建军阀混战以及勾心斗角的政治角逐步。为了利于少年儿童阅读，本书对《三国演义》原著进行了改写。力求保持原著风采，语言流畅。</p>
</div>
</div>
</template>
<script>
import Group from './package/group/index.js'
export default {
name: 'App',
components: {
Group,
},
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
.main {
padding: 30px;
text-align: left;
width: 500px;
}
</style>
二、组件打包
1.配置打包命令
在package.json中增加打包命令
"package": "vue-cli-service build --target lib ./src/package/index.js --name webui --dest webui"
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"package": "vue-cli-service build --target lib ./src/package/index.js --name webui --dest webui",
"lint": "vue-cli-service lint"
说明：
- target lib 关键字 指定打包的目录
- name 打包后的文件名字
- dest 打包后的文件夹的名称
执行打包命令：npm run package
打包完成后，会生成我们指定的webui文件目录，里面存放的就是打包后的文件。
2 初始化package.json
想要发布到npm仓库，我们还得提供一个package.json文件，这里包含包的名称，描述，版本号等基础配置信息，是发布的必要文件，
注意：一定要切换到打包后的webui目录，在此目录下执行命令
可以手动添加，也可以通过npm init -y来初始化一个package.json文件
{
"name": "webui",
"version": "1.0.0",
"description": "vue 组件发布npm示例",
"main": "webui.common.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"vue组件",
"npm发布"
],
"author": "",
"license": "ISC"
}
3 增加README.md文件
最后添加README.md文件，npm发布后，默认展示的就是这个文件。在这里对组件做一下说明
三、发布到npm
1 npm账号
如果没有npm账号，需要先注册一个账号
2 设置npm源
实际开发中，本地的npm镜像源都会使用国内的，如果要发布npm 就需要切换到npm的官方源，命令如下
如果安装了nrm，可以使用 nrm ls查看本地npm源
然后，使用nrm use npm 就可以切换到npm的官方镜像地址了
也可以直接使用
npm config set registry=https://registry.npmjs.org
3 发布
再次确认一下当前终端地址是不是组件打包的目录，如果是项目主目录，发布的时候，会把事个项目发到npm仓库，导致组件不能正确的被引用和使用
首先登录npm
npm login
会要求输入用户名、密码、邮箱，登录成功后就可以发布了
登录成功后会提示：
Logged in as account on https://registry.npmjs.org/.
执行npm run publish发布组件到npm
需要注意：package.json里的name属性必须唯一，如果npm上已存在，是不让发布的，所以发布前最好在npm上查一下自已的包包是否已被占用
登录 npmjs.com,查看自己的包，如下
四、从npm安装使用组件
1 查看npm上组件
2 安装组件
执行 npm i webui-test 安装组件
在main.js中添加引用
import webuitest from 'webui-test';
import 'webui-test/webui.css'
Vue.use(webuitest);
3 使用组件
在页面中添加组件
<el-col :span="24">
<el-form-item>
<CtjGroup :name="'三国演示'" :tips="'中国古典文学四大名著之一'"></CtjGroup>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item :label="'购买数据'">
<el-input></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item :label="'金额总计'">
<CtjInputNumber v-model="value2" :precision="2" :prefix="'￥'" :suffix="'万元'"> </CtjInputNumber>
</el-form-item>
</el-col>
效果如下：
到此，vue组件从开发，发布npm,从npm上安装组件的整个过程就结束了。
总结
1.自定义组件一定要对外提供install方法，是否无法被Vue.use安装
2.组件的命名要避免和已知框架组件冲突，避免给使用者带来困扰
3.发布组件到npm要注意当前执行的目录，重要文件package.json文件的配置中，name要唯一
4.README.md文件要清晰的描述组件的用途入示例