前两篇分享基于vite3vue3的组件库基础项目vue3-component-library-archetype和快速创建项目的工具yyg-cli，但在中大型企业级项目中，这些脚手架或加速器通常是独立搭建的。优雅哥希望每一位前端小伙伴都能知道为什么，所以下一篇文章将进入Vue3企业级优雅实战系列。整个系列将包括五个部分：首先分享如何从0构建一个基础组件库项目，即如何从0开始实现vue3-component-library-archetype。1一个组件库项目应该具备的功能之后参考ElementPlus、AntDesign、VanUI等Vue3开源UI项目，优雅哥认为一套企业组件库项目需要具备以下功能：组件库开发：这个是最基础的，组件库项目必须支持组件库的开发，在项目中开发各种组件；组件库的构建：组件库开发完成后，不可能将所有使用组件库的项目都引入到每个使用源码的项目中，而是构建打包发布到私服上或者npm，每个项目都是通过dependencies来引入和使用的。在这个过程中，涉及到类型定义的抽取，不同模块化规范的包装等；组件库的发布：上面提到组件库构建打包后需要发布到私服或者npm，那么在组件库开发阶段是不是很频繁呢？发到私服？这样做很好。不过亚亚哥的建议是在本地开一个迷你私服。当组件库开发到一定阶段（比如内测版），可以被其他项目使用时，可以按照通常的流程发布到公司私服或者npm。组件库文档的编写和发布：MarkDown通常用于编写组件库的操作手册，各个组件的API（props组件的输入属性，events组件提供的事件，methods暴露的方法组件，以及slots组件支持的slots）、组件说明、demo展示、demo对应的代码等。组件库文档中的Demo不仅可以参考，也可以用来调试组件。文档写好后，需要对文档进行构建打包，发布到HTTP服务，供开发同事查看。组件库开发工具cli：每次新建一个组件，都需要创建一套组件目录文件结构，注册组件，将组件文件添加到文件中，Demo等操作，整个过程繁琐且毫无价值，而组件库可能会有几十个组件，所以需要开发一个cli来快速创建组件，同时实现组件创建的常态化。组件库示例的开发和发布：这个不是必须的。在元件库中加入这部分是基于两方面的考虑。一是开发一个demo站点，展示组件库在项目中的实现效果；另一个是在我的实践中，组件的开发通常是由业务开发驱动的。在实例开发的过程中，组件库中的组件也在逐步完善。当组件实现到一定程度后，就可以将实例抽取出来成为一个独立的工程。2环境准备NodeJS和npm版本：node-vnpm-v你用的最新版本大于等于我的版本。我本地的版本如下：node:8.10.0npm:7.14.0安装或更新pnpm:npminstall-gpnpm安装后查看版本：pnpm-v我本地的pnpm版本号是7.14.2。3构建monorepo项目monorepo单代码库是代码库的一种组织方式，对应multirepos多代码库。Multirepos通常将不同的模块（包）放在不同的代码仓库中，而monorepo则将多个包存储在一个代码仓库中。在我们的组件库基础工程项目中，包含了很多包：多个组件的包、文档对应的包、cli包、example包。如果都维护在不同的代码仓库，那么就需要多个仓库对应。在开发过程中，需要在多个仓库之间切换。另外，不同仓库的代码相互引用也很麻烦。因此，组件库的基础项目采用了monorepo的方式来组织多个包。实现方式有很多，monorepo、Lerna、YarnWorkspace、pnpmWorkspace等，这里我选择pnpm。使用pnpm之后，你会感受到它的诸多好处：速度，磁盘空间等。关于pnpm和monorepo的理论知识，你可以自己上网查，亚亚哥不会写那些无关紧要的废话来凑数。3.1创建项目创建项目根目录创建一个目录作为组件库项目的根目录。目录的名字就是你定义的组件库的名字。我将它命名为yyg-demo-ui。使用您的IDE打开此目录。初始化package.json命令行进入该目录，使用pnpm初始化package.json：pnpminit执行该命令后，会在项目根目录下自动生成一个package.json文件。在package.json文件中指定type属性为module:{..."type":"module",...}git初始化：gitinit创建目录，在项目根目录下创建cli、docs、examples、packagesdirectory分别两个目录，分别存放命令行工具、组件库文档、示例、组件库四个模块，创建foo和yyg-demo-ui（yyg-admin-ui需要改成你的组件库名）在包目录中。目录。mkdir-pclidocsexamplepackages/foopackages/yyg-demo-ui目录结构如下：yyg-demo-ui/|-cli/|-docs/|-example/|-packages/|-foo/|-yyg-demo-ui/3.2配置workspace之前创建了四个目录，需要告诉pnpm有哪些包，pnpm提供配置文件配置monorepo。在项目根目录下创建配置文件pnpm-workspace.yaml：packages:-packages/*-cli-docs-example#排除测试目录内的包-'!**/test/**'上面的配置指定cli、docs、example本身就是包，packages目录下的子目录也是包。还排除所有测试目录。在package.json中指定workspace:{..."workspaces":["packages/*","cli","docs","example"]}至此pnpm+monorepo搭建完成，项目根目录叫做workspace-root，接下来就是初始化workspace-root。
