前言
做为一个前端，我们都想打造一个自己的组件库。那么我就带大家来搭建一下自己的组件库吧。主要用ts来写，因为Vue3的底层也是用ts来写的，从这方面看兼容性不错。
为什么不是rollup
做为Vue组件库打包，我不是用的rollup，因为rollup的插件是不能打包setup lang="ts" setup这样打包是有问题的。但是打包export default defineComponent是可以的。
选择包管理工具
我会选择pnpm包管理工具，具体原因，请参考我之前的文章。pnpm从入门到精通。pnpm主要是支持了workspace协议的。如何开启workspace协议呢？需要在根目录的package.json中添加workspaces的数组。那么有什么用途呢？就是里面的package.json，会共享根目录的package.json中的依赖。减少了依赖库的冗余。
选择文档工具
vitepress
选择CSS工具
SCSS,与element-ui中SCSS的不同的是，element-plus中使用了@use,而不是@import.
为什么官方有这样调整？
1. 用`@import`引入的`mixin`,变量和函数都是全局的。可能存在相同的命名覆盖的情况。
2.避免出现覆盖的情况，只能在命名前面加上前缀。
3.每个样式表在每次@import引入的时候，执行编译为css的时候，会非常耗时。
我们再来看看@use这个SCSS的特性。
以这种方式加载的任何样式都将在编译的 CSS 输出中仅包含一次，无论这些样式被加载多少次。
SCSS的打包工具怎么选择?选择gulp.glup打包需要安装一系列插件。主要有哪些插件呢？
gulp-rename,主要用于glup打包重命名文件。gulp-clean-css主要用于压缩css的插件，减少体积。glup-sass主要是用来打包node-sass和dart-sass的。gulp-autoprefixer自动增加CSS的前缀。glup主要的配置文件，主要写在gulpfile.ts这个文件里面。
初始化一个项目
1.用vite，初始化一个项目。然后项目名称自己写，选择的框架是Vue。命令如下：
pnpm create vite
2.新建文件夹，docs用于放置文档工具，packages用于存放组件，SCSS文件。在packages文件夹中，新增components和theme-chalk两个文件夹。一个用于放组件，一个用于放SCSS文件。然后用pmpm init这个命令在components和theme-chalk中创建package.json文件。
3.在theme-chalk中，新建src文件。安装上面的gulp-rename，gulp-clean-css，glup-sass，gulp-autoprefixer。然后新建gulpfile.ts这个文件。
4.在根路径的package.json中，安装gulp,sass,consola等包，consola用于Node.js和浏览器的优雅控制台记录器。然后在gulpfile.ts中配置相应的打包配置。
