手写 Element Plus：用Monorepo架构搭建Element Plus

一、前言

Element Plus 组件库中拥有非常强大的功能，而这些功能又是极其庞大的，显然这个时候需要工程化管理。接下来我将向你介绍 Element Plus 组件库的目录项目结构，开发环境是如何搭建和介绍 monorepo 在架构组件库是如何使用的。

现在前端很多项目都使用 monorepo 来管理代码，Vue3 和 Element Plus 是比较有代表性的。所以掌握这种管理项目代码的方式是很有必要的。

二、从Element Plus源码项目入门理解pnpm的monorepo

Element Plus 中很多模块之间可以直接单独使用，不需要运行某个模块就能使用，这个好处就是由 monorepo 带来的，使用它能够大大的降低项目模块之间的耦合度。

一）Element Plus中的monorepo

Element Plus 中主要使用的是 pnpm 的 monorepo ,只需要在根目录下新建 pnpm-workspace.yaml 文件,并声明想要在全局使用的工作区就可以了。

Element Plus 在 pnpm-workspace.yaml 文件中声明了 packages/* 、docs 、 play 、 internal/*模块。

• packages/* ：核心组件功能模块。包括 packages 目录下的 components （组件源码）、constants (全局常量）、directives (组件自定义指令）、 hooks (全局hooks) 、local (组件全局语言）、test-utils (测试工具函数）、 theme-chalk (组件全局样式）、 utils (全局工具函数）。packages 目录下所有的文件夹对应的都是一个独立的模块。
• docs : Element Plus 的官方文档模块，它由 vitepress 构建的。
• play : Element Plus 组件的运行文件，创建的组件在这个文件下运行，由 vite --template vue-ts 构建的单独项目。
• internal/* :组件的内置文件，组件的 eslint 的配置文件和 dist 打包文件目录。

二）如何从零构建一个Element Plus 项目目录

1.初始化项目

如果安装了 pnpm 可以执行以下命令，没有则需要安装 pnpm 。

pnpm init

初始化后 package.json 文件可以更改成自定义 name 和 private : true。

在根目录下创建 pnpm-workspace.yaml 文件，声明想要在全局使