【前端工程化-组件库】从0-1构建Vue3组件库（概要设计）

小铭子
7,826 阅读4分钟

前言：开源知识

如何给开源项目提PR，成为Contributor？

  1. fork开源仓库
  2. clone fork后的仓库
  3. 本地开发、自测、代码提交
  4. 更新同步代码
  5. 提交PR

参考：如何参加开源项目-如何给Vue3.0提PR

Vue3组件库概要设计

背景

为了统一企业管理系统或中台产品的视觉风格，提升开发效率，尽可能减少组件的重复开发工作，我们需要打造一套定制化的基础UI组件库。

组件库满足以下需求：

  • 定制统一视觉风格的主题
  • 提供灵活自由组装的UI基础组件
  • 可读性较好的组件文档系统

环境配置

系统设备

  • 系统：MacOS 10.15+
  • 浏览器：Chrome 49+

开发环境

  • Node 16.14.0+
  • pnpm 8.5.1+

基础功能设计

组件库可参考成熟的框架（antd和element），通常划分为以下5类：

  • 通用型组件：比如Icon、Button等
  • 数据型组件：比如Tree树形控件、Form表单、Table表格等
  • 反馈型组件：比如Dialog对话框、Drawer抽屉、Notify通知等
  • 导航组件：比如Menu菜单、Tabs标签等
  • 其他组件：Divider 分割线

image.png

源码架构设计

Monorepo 源码管理

为什么选择Monorepo？

场景MultirepoMonorepo
依赖管理❌ 多个仓库都有自己的 node_modules，存在依赖重复安装情况，占用磁盘内存大。✅ 多项目代码都在一个仓库中，相同版本依赖提升到顶层只安装一次，节省磁盘内存。
开发迭代❌ 多仓库来回切换（编辑器及命令行），项目多的话效率很低。多仓库见存在依赖时，需要手动 npm link，操作繁琐。
✅ 仓库体积小，模块划分清晰，可维护性强。		✅ 多个项目都在一个仓库中，可看到相关项目全貌，编码非常方便。
❌ 多项目在一个仓库中，代码体积多大几个 G，git clone时间较长。
构建部署❌ 多个项目间存在依赖，部署时需要手动到不同的仓库根据先后顺序去修改版本及进行部署，操作繁琐效率低。✅ 构建性 Monorepo 工具可以配置依赖项目的构建优先级，可以实现一次命令完成所有的部署。

pnpm 实现 Monorepo

  1. 项目根目录下创建 packages 多模块
-- packages
  -- component
    --package.json
  -- utils
    --package.json
--package.json
  1. 配置 monorepo 工作空间
packages:
  - packages/* # packages 存放组件包代码
  - play # 存放组件测试的代码
  - docs # 存放组件文档

源码目录设计

image.png

├── .husky
│   ├── _
│   │   └── husky.sh
│   ├── pre-commit
├── docs
│   ├── component
│   │   ├── button
│   │   │   └── index.md
│   │   └── icon
│   │       └── index.md
│   ├── index.md
│   └── vite.config.ts
├── index.html
├── node_modules
│   └── ...
├── package.json
├── pnpm-lock.yaml
├── pnpm-workspace.yaml # momorepo工作空间
├── public
│   └── vite.svg
├── packages            # 基础组件
│   ├── component
│   │   ├── button
│   │   ├── tree
│   │   └── ...
│   └── utils
├── play
│   ├── App.vue
│   ├── main.ts
│   ├── index.html
│   └── vite-env.d.ts
├── .eslintrc.js
├── .gitignore
├── .prettierrc.js
├── tsconfig.json
├── tsconfig.node.json
├── vite.config.ts
└── README.md

相关技术栈

Vue3 + TS + Vite 初始化

Vite 内置了脚手架功能，可以用来快速初始化项目。初始化命令如下：

pnpm create vite

Vite 提供丰富的项目模版，有 vanilla，vanilla-ts，vue，vue-ts，react，react-ts，preact，preact-ts，lit，lit-ts，svelte，svelte-ts，我们选择下载 vue-ts 模板作为组件库的初始代码。（集成 TS 做静态类型检查，可增强组件代码可维护性，团队协作开发便捷）

eslint + prettier + husky 代码规范

组件库开发，需要统一编码风格规范，我们选择集成 eslint、prettier、husky。

代码检查工具 eslint

  • 安装相关依赖
pnpm i eslint eslint-plugin-vue @typescript-eslint/eslint-plugin @typescript-eslint/parser -D
  • 生成配置文件.eslintrc.js
npx eslint --init

代码风格工具 prettier

  • 安装相关依赖
pnpm i prettier eslint-config-prettier eslint-plugin-prettier -D
  • 创建配置文件.prettierrc.js
module.exports = {
    tabWidth: 2,
    semi: false, // 未尾分号, default:  true
    singleQuote: false, // 单引号 default: false
    trailingComma: "none", // 未尾分号 default: es5    all | none | es5
    arrowParens: "avoid", // default: always
    proseWrap: "never",
    endOfLine: "auto" // default lf
};

git提交规范：husky+lint-staged

  • 安装相关依赖
pnpm i husky lint-staged -D
  • 初始化 husky
npx husky install
  • 安装 pre-commit git hook 钩子
npx husky add .husky/pre-commit 'npx lint-staged'
  • 创建配置 .lintstagedrc 控制文件检查范围
{
    "*.{js,ts,tsx}": "eslint --cache --fix"
}

Vitest 单元测试

Vitest 是Vue/Vite团队成员维护的单元测试框架，它的特点如下：

  • 能和 Vite 使用同一配置、转换器、解析器和插件
  • 开箱即用的 TypeScript / JSX 支持等

Vitepress 文档系统

VitePress 是基于vite的vuepress兄弟版，创建 .md 文件即可生成文档页面，且支持组件引入做预览测试，特别适合组件库项目，做文档系统。

总结

行文至此，我们已经做好了 Vue3 组件库开发的准备工作：功能设计、目录架构设计、技术准备。接下来我们就可以开始编码啦，下一章我们再续！！

本专栏文章：

  1. 【前端工程化-组件库】从0-1构建Vue3组件库（概要设计）
  2. 【前端工程化-组件库】从0-1构建Vue3组件库（组件开发）
  3. 【前端工程化-组件库】从0-1构建Vue3组件库（单元测试）
  4. 【前端工程化-组件库】从0-1构建Vue3组件库（打包发布）
avatar
文章
阅读
粉丝