在日常开发中，我们习惯性的会封装一些个性化的组件以适配各种业务场景，突发奇想能不能建一个自己的组件库，今后在各种业务里可以自由下载安装自己的组件。
一. 项目搭建
首先直接使用vue-cli创建一个vue2版本的项目，并下载好elementui，这里我们会尝试封装一个适配上万数据的下拉框组件。
二. 组件准备工作
项目搭建完成后我的目录结构大概是这样的
通常人们喜欢新建一个packages文件夹专门存放组件，例如我们熟悉的element-ui就是如此，但这里我想了想我本身就有一个components文件夹了，干脆就直接使用这个文件夹做我的组件文件夹了，没必要专门单独新建一个。
这里我们需要建一个index.js文件用于组件的注册操作，以下是文件内容
let components = []
const requireAll = require.context("@/components", true, /index\.vue$/)
const modulList = requireAll.keys().map((item) => requireAll(item))
modulList.forEach(({ default: vm }) => {
components.push(vm)
})
// 全局引入
const install = function (Vue) {
// 遍历组件列表并注册全局组件
components.forEach((component) => {
//component.name 此处使用到组件vue文件中的 name 属性
Vue.component("Cl" + component.name, component)
})
}
let exportData = {
install,
}
// 适配单个引入
components.forEach((component) => {
component.install = function (Vue) {
Vue.component("Cl" + component.name, component)
}
exportData[component.name] = component
})
export default exportData
简单说下上面的代码
- 首先我们创建了一个components数组用来存放我们获取的组件。
- 获取组件的方法使用了webpack自带的一写api，可以直接访问到我们指定的文件夹，然后正则匹配出我们需要的组件文件。
- 然后写一个install方法用于组件的批量全局注册。
- 接着我们map下这个components将所有的组件分别构建一个install方法，这样的话我们就可以拥有全局引用和按需引用两种引用模式了。注意这里按需导入并不能像element-ui那样直接import { Button } from “element-ui”，element-ui可以这样写是因为他使用了babel-plugin-component 插件，可以根据你提供的关键字比如Button去指定文件直接读取，我们要按需导入的话据需要
import toolsUi from "element-ui" Vue.use(toolsUi.组件名称) - 最后我们将所有数据直接导出。
三. 构建出发布的包
然后我们需要在package.json里面配置下我们的打包命令，这里我是这样写的
"npmUp": "vue-cli-service build --target lib ./src/components/index.js --name tools_ui --dest tools_ui"
vue-cli-service build：对指定文件夹进行打包--target lib：指定构建的目标为库（library）。这将使构建工具以库模式进行构建，生成一个可供他人使用的组件库。./src/components/index.js：指定入口文件路径。这是你组件库的主要入口文件。--name tools_ui：指定组件库的名称。你的组件库将以 tools_ui 为名称进行构建和导出。--dest tools_ui：指定构建输出的目录。生成的组件库将被输出到名为 tools_ui 的目录中。
然后我们直接执行命令：npm run npmUp
这个时候我们就可以看到我们打包出来的文件夹了
四. 发布工作
我们在终端cd进入到我们的tools-ui下，然后npm init -y来初始化一个新的 package.json文件，在这个文件里面配置出我们的包信息，例如版本，名称等。然后我们使用npm adduser进行登录操作（一般会校验用户名，密码等），前提是已经在npm上有自己的账号。最后我们使用npm publish进行发布操作。
注意第一次发布而可能会遇到大大小小的问题，例如node版本，npm版本问题，npm登录问题，包名称重复等问题，需要具体问题具体分析，一般他会有对应的提示。
五 使用组件库
我们可以直接npm i 发布库的名称进行下载操作。然后在main.js里面直接引入
import tools_ui from "@code_life/tools_ui"
Vue.use(tools_ui)
当然我们也可以按需加载
import tools_ui from "@code_life/tools_ui"
Vue.use(tools_ui.MuchSelect)
