背景
基于现有系统中所封装公共组件，确认组件中编写方式，可抽离则打包至NPM平台，后续其他项目若需使用则通过命令安装，无需组件复制至项目中。
前提条件
需要有npm账号，若没有点击此处跳转创建
第一种方式
提供方
组件
所需上传文件，此处以两个组件为例
FirstComponent.vue
<template>
<div class="bg">
<span>这是要打包的第一个组件123123</span>
</div>
</template>
<script>
export default {
name: 'FirstComponent',
}
</script>
<style lang="scss" scoped>
.bg {
background: url(~@/assets/logo.png) no-repeat;
height: 100px;
width: 100%;
}
</style>
SecondComponent.vue
<template>
<div >
<span>这是要打包的第二个组件</span>
</div>
</template>
<script>
export default {
name: 'SecondComponent'
}
</script>
<style scoped>
</style>
入口文件
新建入口文件exportCom.js
//import vue文件的name from 路径
import FirstComponent from "./src/components/FirstComponent.vue";
import SecondComponent from "./src/components/SecondComponent.vue";
const components = [
FirstComponent,
SecondComponent
];
const install = function (Vue) {
if (install.installed) return;
install.installed = true;
components.forEach(component => Vue.component(component.name, component));
};
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue);
}
// 暴露安装方法和组件
const ChatRobotPlugin = {
install,
FirstComponent,
SecondComponent
};
export default ChatRobotPlugin;
export { FirstComponent, SecondComponent };
在package.json文件中scripts 部分插入lib的脚本命令
"lib": "vue-cli-service build --target lib ./exportCom.js --name new-components-lib --dest new-components-lib"
其中，你只需要根据你的项目改三个位置,
1、./exportCom.js 是我们新建的js文件，不管你新建的名称是什么，路径是什么，正确填写即可，注意这里不单是文件名，而是文件路径
2、new-components-lib 打包后的文件名称
3、new-components-lib 打包文件所在的文件夹名称
注意：--name打包后的文件名称 --dest 打包文件所在的文件夹名称，两个名称最好一样，避免混淆。
运行编译
npm run lib
等待运行完成后，项目中会自动生成一个文件夹new-components-lib（我们之前自己定义的名字）
进入到我们打包好的new-components-lib包中，初始化一个package.json包
// 进入打包后的目录
cd new-components-lib
// 初始化package.json
npm init -y
生成文件package.json
{
"name": "new-components-lib",
"version": "1.0.0",
"description": "",
"main": "new-components-lib.common.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
推送NPM
推送至npm平台，检查npm源是不是：https://registry.npmjs.org/，如果不是需修改为https://registry.npmjs.org/
npm config get registry //查看npm源
npm config set registry https://registry.npmjs.org //更换源
npm login // 登录npm，没有账号需要注册
npm publish // 发布npm库
查看npm平台，已经上传成功。
使用方
安装使用
在新项目中组件名称以 new-components-lib为例, 系统安装资源npm i new-components-lib 安装完成后main.js 直接引入组件
import components from 'new-components-lib';
Vue.use(components);
使用方法
页面中使用
展示效果
第二种方式
提供方
组件
所需上传文件
.npmignore文件
配置此文件是为了打包是去除不必要的文件，加快编译速度，具体需要去除那些文件，以实际项目需要为准。
node_modules/
dist
public/
src/App.vue
src/main.js
src/router
src/views
src/api
src/constant
src/directives
src/layout
src/plugins
src/store
.gitignore
permission.js
babel.config.js
jsconfig.json
package-lock.json
vue.config.js
配置入口
package.json文件，关键version，每次上传需更改，npm根据版本号变化更新，main作为入口，需要注意将private置为false，不然上传时会报错。
exportCom.js封装用于抛出组件
import commonButton from './commonButton.vue';
import commonCheckbox from './commonCheckbox.vue';
import commonDatePicker from './commonDatePicker.vue';
import commonDrag from './commonDrag.vue';
import commonInput from './commonInput.vue';
import commonRadio from './commonRadio.vue';
import commonSelect from './commonSelect.vue';
import commonSwitch from './commonSwitch.vue';
import commonTitle from './commonTitle.vue';
import flowChart from './flowChart.vue';
import flowLog from './flowLog.vue';
import inBody from './InBody.vue';
import listTable from './listTable.vue';
import moreHeader from './more-header.vue';
import multipleSearch from './multipleSearch.vue';
import noData from './nodata.vue';
import pagination from './pagination.vue';
import tableFilter from './TableFilter.vue';
import textTooltip from './text-tooltip.vue';
import uploadFile from './UploadFile.vue';
const components = [
commonButton,
commonCheckbox,
commonDatePicker,
commonDrag,
commonInput,
commonRadio,
commonSelect,
commonSwitch,
commonTitle,
flowChart,
flowLog,
inBody,
listTable,
moreHeader,
multipleSearch,
noData,
pagination,
tableFilter,
textTooltip,
uploadFile,
]
const install = function(Vue) {
components.forEach(component => {
Vue.component(component.name, component);
});
}
/* 支持使用标签的方式引入 */
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue);
}
/* 抛出 */
export default {
install,
commonButton,
commonCheckbox,
commonDatePicker,
commonDrag,
commonInput,
commonRadio,
commonSelect,
commonSwitch,
commonTitle,
flowChart,
flowLog,
inBody,
listTable,
moreHeader,
multipleSearch,
noData,
pagination,
tableFilter,
textTooltip,
uploadFile,
}
推送NPM
推送至npm平台，检查npm源是不是：https://registry.npmjs.org/，如果不是需修改为https://registry.npmjs.org/
npm config get registry //查看npm源
npm config set registry https://registry.npmjs.org //更换源
npm login // 登录npm，没有账号需要注册
npm publish // 发布npm库
使用方
安装使用
组件名称以 epc2-components-npm 为例, 系统安装资源npm i epc2-components-npm 安装完成后main.js 直接引入组件
import components from 'epc2-components-npm';
Vue.use(components);
使用方法
展示效果
总结
方式一和方式二根据项目不同需求使用，方式二是兼容的，不需要关心组件源项目webpack配置。基于现有使用方式一进行编译打包上传，发现其他项目不可用。这种情况下，我们在不改变现有系统webpack配置的情况下，使用方式二进行组件打包上传。
题外篇
现有系统方式一打包实践： package.json配置命令并执行后文件生成如下，此时我们可发现文件数量及名称与上述有差别，暂且不管，继续操作。
进入到我们打包好的epc2-components-lib包中，初始化一个package.json包
// 进入打包后的目录
cd epc2-components-lib
// 初始化package.json
npm init -y
生成文件package.json
{
"name": "epc2-components-lib",
"version": "1.0.0",
"description": "",
"main": "epc2-components-lib.common.epc2-components-lib.common.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
npm publish 推送至npm平台
在其他项目中引入并使用
此时打开页面，发现页面上组件均未展示，F12打开控制台发现一堆报错，组件未定义。
修改vue.config.js，之后再按照之前步骤进行打包，上传，引用。以commonInput为例。
module.exports = {
css: {
extract:false
},
}
编译后文件跟上述相比，数量少了一些。
项目引入，看页面展示，此时页面正常。
