我的前端技术栈
现在 AI 编程工具日新月异，极大的提升了编程效率，可以说是革命性生产力工具，尤其是对前端项目，更是如虎添翼。拥有自己的前端技术栈，我觉得还是有必要的，在自己掌控的架构内，按照自己的编程习惯，可能发挥效果更好，由于自己不是一直在写前端项目，只是偶尔写一下，过段时间都忘了如何选型，每次开始一个项目都会纠结选型，外加前端技术日新月异，在此整理记录一下，便于自己每一次前端项目选型，同时也可以随时更新这个文章。
- 整理常用的前端 UI 库，作为导航
- 整理不同项目的前端框架，UI 等选型方案
- 前端工具类库
- 灵感库导航
没有评分代表未深入使用
前端 UI 库
整理常用的前端 UI 库，作为导航
React
综合库
- 蚂蚁 Ant Design ⭐⭐⭐⭐⭐
- 淘宝 fusion⭐⭐⭐⭐
- 抖音 semi ⭐⭐⭐⭐
- 腾讯 TDesign
- 字节 arco
- shadcn/ui
- material-ui
图表库
Vue
TDesign 和 arco 都支持 Vue
- element ⭐⭐⭐⭐⭐
前端项目选型
后台管理系统
Ant Design Pro ⭐⭐⭐⭐⭐
https://github.com/ant-design/ant-design-pro
首选方案选择该方案，方案成熟，社区活跃，出自蚂蚁金融，该方案采用umijs+ant design
飞冰 ⭐⭐⭐⭐
https://fusion.design/pc/template/739
我使用最多的是 ice.js，最早是提供了很多 block 级模板，后续演化出了 ice.js。
该方案采用 ice.js+fusion
ice.js 很容易入手，属于渐进式，虽然有一系列开发工具，不过组件和模板建设不如 ant design。如果只是单纯选 react 框架，我更愿意使用 ice.js。
vite+semi ⭐⭐⭐
虽然没有成熟模板，但是 vite 确实很适合快速搞个轻量级项目，文档丰富，使用简单。稍微搞搞就可以自己搞个简单后台管理系统项目。
落地页/文档型网站
dumi ⭐⭐⭐⭐⭐
我的 book 和 toolkit 都是该技术方案，使用简单，唯一不足是 2.0 主题我觉得没有 1.0 好看。
Starlight ⭐⭐⭐⭐⭐
https://starlight.astro.build/
Starlight 是一个基于 Astro 框架构建的全功能文档主题。 Astro 非常灵活，什么都能做，但文档站点是一个特别常见的场景。所以 Astro 团队就推出了 Starlight：帮助开发者快速搭好文档站，不用自己每次造轮子
astrowind ⭐⭐⭐⭐⭐
https://github.com/onwidget/astrowind
一个使用 Astro 5 和 Tailwind CSS 的免费落地页模板
VuePress
暂未使用
自定义网站/官网
目前选择 Vite + Tailwind CSS
我现在的官网就是这个方案：trumandu.top
前端工具类库
记录自己常用库
| 项目 | 仓库地址 | 描述 |
|---|---|---|
| dayjs | https://github.com/iamkun/dayjs/ | 处理时间库 |
| hooks | https://github.com/alibaba/hooks | React Hooks library |
| swr | https://github.com/vercel/swr | 用于数据获取的 React Hooks |
| axios | https://github.com/axios/axios | http client 客户端 |
| lodash | https://github.com/lodash/lodash | JavaScript 实用工具库，提供了很多高性能的数组、对象、函数处理方法 |
| numeraljs | https://github.com/adamwdraper/Numeral-js | 数字格式化库 |
| decimal.js | https://github.com/MikeMcl/decimal.js/ | 数字计算精度安全库 |
| dinero.js | https://github.com/dinerojs/dinero.js | 金额计算与格式化库 |
灵感库导航
| 地址 | 描述 |
|---|---|
| https://component.gallery/ | 网站中包含清晰的组件用途和介绍、优秀的设计系统文件资源 |
| https://www.webinteractions.gallery/ | Collection of Web Animations from All Over the Web |
| https://www.unsection.com/category/hero-section-design | |
| https://21st.dev/?tab=components&sort=recommended | – |
| https://www.figma.com/community/file/1440832812269040007/windows-ui-kit | window UI 设计 |