在日常开发中,我们习惯性的会封装一些个性化的组件以适配各种业务场景,突发奇想能不能建一个自己的组件库,今后在各种业务里可以自由下载安装自己的组件。
一. 项目搭建
首先直接使用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)