哈喽大家好，因为从工作开始一直做业务开发，痛定思痛，最近仿照ele-puls来写一个自己公司的组件库，在优化业务的同时，提升一下自己的技术，大概完成了1-2个组件，在写的时候遇到很多困难，都是零零散散查找解决。所以想记录一下，写一个系列文章。希望能在巩固自己知识的同时，给后来的一些人一些帮助。因为自己本身技术也不过硬，欢迎大家讨论以及批评指正。
有关技术栈
虽然是仿照ele-plus，同时也是基于ele-plus做的二次开发
- pnpm+monorepo
- vue3+ts
- rollup打包+gulp构建
- ts-morph AST处理
- sass
为什么使用pnpm+monorepo
pnpm 是一个与 npm 和 Yarn 类似的包管理器，pnpm 的主要优势在于其节省磁盘空间和提高安装速度的能力。通过硬链接在 node_modules 中共享依赖,避免了重复安装同一个包的多个版本，而且pnpm 支持原生 Monorepo，使跨项目的包管理变得更加简单。
Monorepo 是将多个包统一放置在一个仓库进行管理的方式。element-puls用的也是这种模式
项目初始化
- 安装pnpm，node版本要求v18.12以上，我使用的是v20.10.0
npm install -g pnpm 全局安装pnpm
我们新建一个library目录，执行 pnpm init初始化，然后在根目录下创建pnpm-workspace.yaml文件，pnpm本身支持monorepo，不用额外安装包。
- 我们初始创建三个目录，在 pnpm-workspace.yaml里这样声明。packages与internal目录下的都可以成为单独的包，** 跟 * 的区别是，* 是子目录，** 是当前目录下任意层级的目录
packages:
- packages/**
- play
- internal/*
packages 用来存放各类组件模块，组件相关资源（样式文件，模版文件），可复用的功能模块（工具类函数以及常量）
play 用与引入我们的组件进行测试
internal 主要是打包相关的内容，以及一些内部配置
- 填充项目
- 根目录下创建
.npmrc文件。写配置shamefully-hoist=true，提升那些不在根目录的node_modules(扁平化) 配置很关键 - 在packages下创建目录，
components目录存放开发组件，constants目录存放常量，theme-chalk存放样式，utils存放工具类的函数 - 在internal里创建目录，
build目录放一些核心打包内容。build-utils目录存放一些打包相关的函数以及抽离出来的常量
在新创建的所有子目录下执行pnpm init
目前目录是这样
.
├── internal
│ ├── build
│ │ └── package.json
│ └── build-utils
│ └── package.json
├── package.json
├── packages
│ ├── components
│ │ └── package.json
│ ├── constants
│ │ └── package.json
│ ├── theme-chalk
│ │ └── package.json
│ └── utils
│ └── package.json
├── play
├── pnpm-lock.yaml
└── pnpm-workspace.yaml
然后先全局安装vue,typescript,element-plus,因为我觉得表格基于ele二开会方便点。
pnpm add vue typescript element-plus vue-tsc -Dw
我们这几个全局安装，所以需要-w
小结
这节就大概介绍下要做的事情，先填充了目录，下一章我们主要写一个table组件，然后用rollup打包出来。
