Vue2.0+版本lib模式打包多组件或单组件及在项目里引用（一）

条件：Vue2.0+、Vue-cli脚手架4.5.15、Node14.17.5、webpack

一、写好项目里所需要的组件。

注意：组件里的name和组件的文件名称尽量要一致，（避免记错，在下面会有解释），文件目录大概如截图：

二、配置组件文件入口。

新建一个组件文件入口，格式为：CustomComponentsFileName/index.js，在这个js上面配置Vue组件模式的信息。

index.js代码如下：在index.js里引入两个项目里所需要的父组件，单组件引用一个即可，（parentComponent1和parentComponent2是一步骤截图里的父组件1、父组件2）

import parentComponent2 from '../folderName/parentComponent2.vue'
const components = [
	parentComponent1,
	parentComponent2
]
// vue插件模式需要暴露install方法
// vue.user
const install =(Vue)=>{
	components.forEach(component => {
		Vue.component(component.name, component)
	})
}
if (typeof window !== 'undefined' && window.Vue) {
	//通过`script`标签引入的情况，在组件内部完成组件注册。
	install(window.Vue);
}
export {
  install,
  parentComponent1,
  parentComponent2
}

export default {
  install,
  parentComponent1,
  parentComponent12
}

三、配置package.json。

打包指令名称:命令 -- target lib 打包组件路径 --dest 打包后组件文件夹名 --name 打包后组件文件名称

-- target lib 关键字打包的路径
-- name 打包后的文件名称
-- dest 打包后文件夹名称

举例：

"build:lib": "vue-cli-service build --target lib ./src/CustomComponentsFileName/index.js --dest CustomComponentsFileName --name CustomComponentsFileName"

四、打包

运行在package.json里写好的打包指令名称，举例如下，运行好以后，就会出现截图的内容

npm run build:lib
common：必须要使用require引入才能使用
umd：所有的模块化都支持
min：格式化后去掉空格及注释，压缩过后
一般情况下使用umd.min版本就可以了

五、组件应用

在项目里的全局使用：main.js引用组件，代码如下

import CustomComponentsFileName from '../CustomComponentsFileName/CustomComponentsFileName.umd'
import '../CustomComponentsFileName/CustomComponentsFileName.css'

Vue.use(CustomComponentsFileName)

然后在项目的某个页面或者组件上引用即可，如果注册了一个父组件，只调用一个即可，下面的举例中，是在上面代码里注册了两个

<parentComponent1 />
<parentComponent2 />

六、注意

打包好后，在该项目下立即引用组件的时候，再次刷新页面会报一堆的错，此时只需要重新启动项目，npm run serve 或者npm run dev