每位同学都应该构建一个自己的组件库！

前端训练营：1v1私教，终身辅导计划，帮你拿到满意的 offer。 已帮助数百位同学拿到了中大厂 offer

Hello，大家好，我是 Sunday。

昨天有一位同学联系我，要在项目中使用大量的 svg 图标，问：有没有好的方式，可以快速的引入这些图标效果，而不需要每次都使用负责的 svg 标签

我一看，这不就是标准的 svg-icon 组件吗？所以就把 svg-icon 的代码发给他。不到 1 分钟，就直接完成了导入，后面再也不需要为 svg 的展示发愁了。

在我们日常的工作中，很多的项目中很多功能其实都是通用的，比如：svg-icon、上拉加载、图片懒加载指令 等等。如果每次遇到这样的功能都现场去写，那么无疑会浪费我们很多的时间。

把这些通用的功能，整理起来 变成一个类似于 通用组件库 || 物料库 的东西，就显得非常有价值了。

这个价值主要会体现在三个方面：

1. 简历：将来你的简历中可以体现出这样的通用组件项目。从而区别 常见的后台管理系统，让你的简历拥有更多的价值
2. 沉淀：试想一下，如果你手中拥有很多通用功能解决方案，那么在后续的项目开发中，是不是就可以节省很多的工作压力
3. 开源：开源意味着你将会变成别人眼中的“大佬”。当你积累的通用组件足够多之后，那么就可以把它 或开源、或分享 从而提升自己的影响力，为后续第二曲线积累资本

因此，我建议 每位同学都应该构建一个自己的组件库 这将是一个非常有价值的事情！

那么，如果想要构建一个自己的组件库，应该怎么做呢？

核心就是如下三点，我们一起来看一下~~

1、项目定位

虽然我们把它称为是 “组件库”，但是里面并不一定只能是存放组件。

物料、组件、方法、Hooks、指令 都可以。

我们可以把它定位成一个 通用前端物料资源库，用以整理你日常工作中遇到过的，或可能会遇到的各种通用功能。

2、构建方案

构建方案分为：技术栈 和 打包器 两种。

• 技术栈：Vue || React 均可。主要看你日常开发中习惯使用哪个
• 打包器：通常情况下库的打包更推荐使用 rollup 。但是 rollup 很多同学可能并不熟悉，所以说大家可以在 rollup 和 vite 中进行选择，二选一即可。

3、文档编写

既然是库，那么必然要有 使用文档，否则时间长了，只有上帝知道这个库是做什么的了。

那么如何去编写文档呢？有几类库供大家选择：

1. Storybook：昨天我们在 4 个强大的开源工具，帮你大幅提升开发体验 还介绍了这个工具。它是一个用于开发和测试 UI 组件的开源工具
2. dumi：为组件开发场景而生的文档工具，它的功能相比 Storybook 会更加纯粹
3. 其他：比如 vant-cli、VitePress 等这些构建工具。这里有的是可以直接构建组件库文档的（vant-cli），有些仅仅是静态站点工具（VitePress），整体不如前两种方案。