Vue3企业级优雅实战

前两篇文章分享了基于 vite3 vue3 的组件库基础工程 vue3-component-library-archetype 和用于快速创建该工程的工具 yyg-cli，但在中大型的企业级项目中，通常会自主搭建这些脚手架或加速器。优雅哥希望每位前端伙伴能知其所以然，故接下来的文章将进入 Vue3 企业级优雅实战 系列，整个系列将包括五大部分：

首先会分享如何从 0 开始搭建一套组件库基础工程，即如何从 0 实现 vue3-component-library-archetype。

1 组件库工程应该具备的功能

在参考 Element Plus、Ant Design、Van UI 等 Vue3 开源 UI 项目后，优雅哥认为一套企业组件库工程需要具备如下功能：

2 环境准备

node -v npm -v 

各位使用的版本最新大于等于我的版本。我本地的版本如下：

node：8.10.0 npm：7.14.0 

npm install -g pnpm 

安装后查看版本：

pnpm -v 

我本地 pnpm 版本号为 7.14.2。

3 搭建 monorepo 项目

monorepo 单一代码库，是一种代码库的组织方式，与之对应的是 multirepos 多代码库。multirepos 通常是将不同的模块（packages）放在不同的代码仓库中，而 monorepo 是一个代码仓库中存放多个 packages。

在咱组件库基础工程项目中，包含了很多个包：多个组件的包、文档对应的包、cli 包、example 包，如果都在不同的代码仓库中维护，那则需要对应多个仓库，开发过程中需要在多个仓库间切换。此外，不同的仓库间的代码相互引用也比较麻烦。所以在组件库基础工程采用 monorepo 的方式来组织多个包。

实现 monorepo 有很多方式，Lerna、Yarn Workspace、pnpm Workspace 等，这里我选择 pnpm，使用 pnpm 后你会感觉到它的很多好处：速度、磁盘空间等。

关于 pnpm、monorepo 的理论知识，大家自己上网查询，优雅哥就不写那些无关痛痒的废话来凑数了。

创建一个目录，作为组件库工程的根目录，目录名就使用你定义的组件库的名称，我命名为 yyg-demo-ui。用 IDE 打开该目录。

在命令行中进入该目录，使用 pnpm 初始化 package.json：

pnpm init 

执行完该命令后，会在项目根目录下自动生成 package.json 文件。在 package.json 文件中指定 type 属性为 module：

{ ... "type": "module", ... } 

git init 

在项目根目录下分别创建 cli、docs、example、packages 四个目录，分别存放命令行工具、组件库文档、example、组件库四大模块，并在 packages 目录下创建 foo 和 yyg-demo-ui （yyg-admin-ui 需修改为你的组件库名）两个目录。

mkdir -p cli docs example packages/foo packages/yyg-demo-ui 

目录结构如下：

yyg-demo-ui/ |- cli/ |- docs/ |- example/ |- packages/ |- foo/ |- yyg-demo-ui/ 

前面创建了四个目录，需要告诉 pnpm 有哪些包，pnpm 提供了配置文件来配置 monorepo。

packages: - packages/* - cli - docs - example # exclude packages that are inside test directories - '!**/test/**' 

上面的配置指定了 cli、docs、example 本身是 package，packages 目录下的子目录也是 package。同时排除了所有的 test 目录。

{ ... "workspaces": [ "packages/*", "cli", "docs", "example" ] } 

到这一步就完成 pnpm + monorepo 的搭建了，项目根目录称为 workspace-root，下一步将初始化 workspace-root。

感谢你阅读本文，如果本文给了你一点点帮助或者启发，还请三连支持一下，点赞、关注、收藏，程序员优雅哥会持续与大家分享更多干货

海报图正在生成中...

竖版 宽版