组件库搭建

刀刀

4/8/2025

0 字

0 分钟

学习明灯

UP主：三十的前端课，视频地址：前往学习

思路流程

前端开发时，常常会搭建一个自己的组件库。搭建一个组件库最基础的步骤总览如下：

创建一个项目（脚手架、lerna ），后续项目的 readme.md 就是该脚手架的文档
项目下新建文件夹，后续在此开发
Workspace 定义连接
编写组件库入口代码，支持按需引入和全局引入。后续引入组件库只需引入入口文件代码
在文档项目中引入，开发调试
编写脚本命令，用于打包组件库

上手实操

前置操作

接下来先新建一个项目，这里以 vite 创建的 vue3 项目为例。

bash

npm init vue@latest

新建一个组件库的文件夹，推荐先新建一个 package 文件夹，再在里面新建，原因是后续可能会用到其他工具。本次新建了一个 MyUI 文件夹。

新建好后新建一个 index.js 文件，export default 导出一个对象。

市场上组件库都是直接 import xxx from '组件库名称' ，无需 ./ 路径引入。想要实现该功能就需要 Workspace 定义连接。返回项目最外层的 package.json 文件中定义 Workspace 。

json

{
  // ...
  "workspace": ["docs/.vitepress/components/MyUI*"]
}

注意：

在定义好 Workspace 后，需要 npm i 一下，无之前是否已经 npm i
通过命令行初始化 MyUI 文件夹，让其生成 package.json 文件，后续映射到 node_modules 。在 package.json 文件中主要由 main 字段控制指定导出的文件
注意 node.js 版本要在 16 以上，否则不生效

现在 import 后打印，控制台能看到导出的对象。

全局注册

接下来思考一下如何实现全局引入。全局引入一个组件时，都是通过 use() 注册组件。

const app = createApp(App);
app.use(myui);

use() 本质是传一个对象进去，它会调用 install 方法，执行方法是会传入一个参数 vue ，可以通过该参数执行 mixin 混入和 component 注册组件等。

引入全局的组件，循环注册。

import comp1 from "./comp1/index.vue";
import comp2 from "./comp2/index.vue";

let obj = {
  comp1,
  comp2,
};

export default {
  install(vue) {
    Object.keys(obj).forEach((item) => {
      vue.component(item, obj[item]);
    });
  },
};

局部注册

全局导出是 export default ，局部导出则通过 export 导出，依次导出组件即可。

export { comp1, comp2 };

打包

最后打开是打包组件库 myui 的代码，因此需要在 package.json 文件中添加一个新的打包命令。

{
  // ...
  "scripts": {
    // ...
    "build": "vite build --config lib.config.js",
  },
}

然后在根目录下新建一个 lib.config.js 文件，复制 vite.config.js 代码修改一下。

打包时默认以入口文件的 index.html 打包，以整个项目为单位打包。想要打包为组件库则需要改写模式，改写打包的入口文件。

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig ({
  plugins: [
    vue()
  ]，
  // 改写模式
  build: {
    lib: {
      entry: './package/myui/index.js',
      name: 'myui'
    }
  }
})

打包后会生成两个文件，其中xxx.mjs 文件用于适配 import 引入方式；xxx.umd.js 适配浏览器引入方式。最后通过 npm 官网发布即可。

组件库打包好后打包文档，文档直接 npm run build ，打包后放到服务器上即可。

组件库搭建 ​

思路流程 ​

上手实操 ​

前置操作 ​

全局注册 ​

局部注册 ​

打包 ​