前端技术栈选型
按业务场景给出完整技术栈选型(包含构建工具、UI 框架、组件库、状态管理、数据请求等),用于新项目立项时直接参照。
核心结论
React 体系(3 个场景统一)
管理后台 → Vite + React + Ant Design Pro
官网/营销页 → Next.js + Tailwind CSS
小程序/H5 → Taro(React 语法) + NutUI
Vue 体系(仅文档站)
文档/知识库 → VitePress(写 Markdown 即可,不需要学 Vue)💡 掌握 React 一套就够 90% 场景;文档站用 VitePress 是因为 Markdown 驱动,几乎不写代码。
选型决策树
新项目要做什么?
│
├── 内部人员用(后台、数据看板、配置管理)
│ └── Vite + React + Ant Design Pro → 场景一
│
├── 面向普通用户 + 需要被搜索引擎收录
│ └── Next.js + Tailwind CSS → 场景二
│
├── 微信小程序 / H5 移动端
│ └── Taro(React) + NutUI → 场景三
│
└── 写文档、团队知识库
└── VitePress → 场景四场景一:内部管理系统
定位:PC 端,内部人员使用,表格/表单密集,无 SEO 需求 代表项目:bbe-prototype、各类管理后台
技术栈
| 分类 | 技术 | 版本 | 说明 |
|---|---|---|---|
| 构建工具 | Vite | 5.x | 极速热更新,开发体验好 |
| 语言 | TypeScript | 5.x | 强类型 |
| UI 框架 | React | 18.x | — |
| 组件库 | Ant Design + Pro Components | 5.x / 2.x | 企业级组件,表格/表单/布局开箱即用 |
| 状态管理 | Zustand | 4.x | 轻量,无样板代码 |
| 路由 | React Router | 6.x | 标准方案 |
| 数据请求 | ahooks useRequest + Axios | — | AntD 生态官方 Hooks,功能比 SWR 更全 |
| 工具函数 | ahooks | 3.x | AntD 官方 60+ React Hooks 集合 |
| 表单 | Ant Design Form(内置) | — | 与 AntD 深度集成 |
| 图表 | @ant-design/charts | 2.x | 与 AntD 设计语言统一,覆盖 99% 后台图表需求 |
| Mock | MSW | 2.x | 拦截请求,前端独立开发 |
| 样式 | CSS-in-JS(AntD 内置) | — | 走 AntD token 体系 |
| 包管理 | pnpm | 10.x | — |
选型理由
- AntD Pro Components:
ProTable/ProForm把企业后台 80% 重复劳动封装好,后台开发效率天花板。 - 图表只用 @ant-design/charts:基于 G2Plot,配色/字体/圆角与 AntD 自动统一。管理后台的柱/线/饼/漏斗/仪表盘等需求 100% 覆盖,不要混用 ECharts(包体积翻倍 + 配色不统一)。若项目本质是数据大屏,那是另一类场景,整体切 ECharts,而非混用。
- 数据请求用 ahooks:
useRequest内置轮询、防抖、并发控制、缓存,API 比 SWR 更丰富,且与 AntD 同源(均为蚂蚁/字节体系)。
场景二:官网 / 营销页
定位:面向普通用户,SEO 强需求,品牌设计感强 代表项目:公司官网、产品介绍页、活动落地页
技术栈
| 分类 | 技术 | 版本 | 说明 |
|---|---|---|---|
| 框架 | Next.js(App Router) | 14.x+ | SSR/SSG,SEO 天然支持 |
| 语言 | TypeScript | 5.x | — |
| UI 框架 | React | 18.x | Next.js 内置,无需单独安装 |
| 样式 | Tailwind CSS | 3.x | 原子化 CSS,设计自由度高 |
| 组件库 | shadcn/ui | — | 基于 Tailwind 可完全定制,非黑盒 |
| 状态管理(按需) | Zustand | 4.x | 优先 Server Components,客户端状态少时可不引入 |
| 数据请求 | Server Components fetch(内置) | — | 服务端直接取数,无需客户端请求 |
| 表单 | React Hook Form + Zod | — | 轻量 + schema 验证 |
| 动画 | Framer Motion | — | 官网交互动画 |
| SEO | Next.js Metadata API(内置) | — | 自动生成 meta 标签、OG 图 |
| 国际化 | next-intl | — | App Router 原生支持 |
| 部署 | Vercel / Nginx 静态导出 | — | Vercel 一键部署最省事 |
| 包管理 | pnpm | 10.x | — |
选型理由
- 为什么不用纯 React(Vite + React):纯 React 是 CSR(浏览器渲染),初始 HTML 是空的,搜索引擎爬虫抓不到内容,SEO 严重受损。Next.js 的 SSR 让服务端直接返回完整 HTML,爬虫和用户首屏都收益。
- 为什么不用 Ant Design:AntD 视觉风格固定(企业蓝、信息密集),官网需要品牌设计感,Tailwind + shadcn/ui 可完全定制每一个像素。
- shadcn/ui 不是黑盒:它把组件源码直接复制到你的项目里,你拥有完整控制权,改样式不再需要"覆盖样式 hack"。
场景三:微信小程序 + H5
定位:面向 C 端用户,一套代码同时输出小程序和 H5 代表项目:bbe 薪到了员工端、各类 C 端轻应用
技术栈
| 分类 | 技术 | 版本 | 说明 |
|---|---|---|---|
| 跨端框架 | Taro | 4.x | React 语法,编译成小程序/H5/支付宝等 |
| 语言 | TypeScript | 5.x | — |
| UI 框架 | React | 18.x | — |
| 组件库 | NutUI React | 2.x | 京东出品,Taro 官方推荐,组件 80+ 覆盖完整 |
| 状态管理 | Zustand | 4.x | Taro 环境兼容良好 |
| 路由 | Taro 内置 | — | 小程序页面栈,H5 自动转 history |
| 数据请求 | Taro.request 封装 | — | 统一抹平小程序/H5 请求差异 |
| 样式 | CSS Modules + Sass | — | Tailwind 部分特性小程序不支持,避免用 |
| 微信能力 | @tarojs/taro(内置) | — | 授权、支付、分享、JSSDK |
| 登录方案 | 微信静默授权 + 手机号绑定 | — | 标准小程序登录流程 |
| 包管理 | pnpm | 10.x | — |
选型理由
- 为什么 Taro 而不是 Vite + Vue + Vant:Taro 一套代码同时编译成小程序和 H5,统一在 React 体系内(与场景一/二技术栈一致),避免维护两套代码。
- 代价认知:Taro H5 输出带编译运行时,包体积偏大,CSS 灵活度受小程序规范限制。适合"小程序为主、H5 为辅"的场景;若 H5 是独立大型产品,仍建议单独做 Vite + React + Ant Design Mobile。
- 组件库只用 NutUI:Taro 官方推荐,组件最新、文档最全。不要混用 Taroify(视觉风格不统一 + 包体积翻倍 + 心智负担)。
场景四:文档 / 知识库
定位:技术文档、团队 Wiki,内容静态,Markdown 驱动 代表项目:ai-skill-hub、组件库官网、API 文档
技术栈
| 分类 | 技术 | 版本 | 说明 |
|---|---|---|---|
| 框架 | VitePress | 1.x | Markdown 自动生成页面,无需写代码 |
| 内容格式 | Markdown + MDX | — | 支持在 Markdown 里嵌入 Vue 组件 |
| 主题 | VitePress 默认主题 | — | 已内置导航、侧边栏、深色模式 |
| 搜索 | VitePress 本地搜索(内置) | — | 零配置,几百到上千篇文档完全够用 |
| 图表/流程图 | Mermaid | — | Markdown 直接嵌流程图、时序图、ER 图 |
| 评论 | Giscus | — | 基于 GitHub Discussions |
| 部署 | GitHub Pages / Nginx | — | build 产物纯静态文件 |
| 包管理 | pnpm | 10.x | — |
选型理由
- 为什么不用 Next.js 做文档:Next.js 做文档要自己写 React 组件、实现侧边栏/搜索/导航,而 VitePress 这些都开箱即用,新增一篇文档只需新建
.md文件。 - 搜索只用内置,不上 Algolia:VitePress 本地搜索零配置,几百到上千篇文档完全够用。Algolia DocSearch 是为 Vue/React 官网级别(数千页)的大型开源文档准备的,需要外部申请、爬虫配置、网络依赖,个人/团队知识库 99% 用不上。
- Mermaid 的价值:文档里画架构图、流程图、时序图,传统做法是用 draw.io 导出 PNG,Mermaid 让你直接在 Markdown 里写代码生成图,版本可控、可 diff。
公共规范(四个场景统一)
| 分类 | 工具 |
|---|---|
| 包管理 | pnpm —— 快、省磁盘、严格依赖隔离 |
| 语言 | TypeScript |
| 代码格式 | Prettier |
| 代码检查 | ESLint |
| Git 提交规范 | Commitlint + Conventional Commits |
| Git Hooks | Husky + lint-staged |
技术栈全景速查
场景 框架 组件库 状态管理 数据请求
─────────────────────────────────────────────────────────────────────────────
管理系统 Vite + React Ant Design Pro Zustand ahooks useRequest
官网 Next.js shadcn/ui Zustand(轻) Server fetch
小程序/H5 Taro + React NutUI React Zustand Taro.request
文档站 VitePress (内置) — —常见疑问
Q1:Next.js 能做手机 H5 吗? A:能,但不是首选。Next.js 输出标准 HTML,手机浏览器可访问,但微信内嵌 H5 业界更常用 Taro / Vant —— 组件专为移动端设计,触屏体验更好。
Q2:Next.js 能做微信小程序吗? A:完全不能。小程序是独立运行环境,不跑浏览器,不认 HTML/CSS,只能用 Taro / uni-app / 原生小程序框架。
Q3:Vite 和 Next.js 都是 React 的"上层",怎么选? A:看是否需要 SSR/SEO。需要 → Next.js,不需要 → Vite(更快、更轻)。管理后台无 SEO 需求,Vite 是更优选择。
Q4:三个场景的项目都需要 Node.js 服务器吗? A:只有 Next.js 方案的生产环境需要持续运行 Node.js 服务器(承担 SSR)。Vite、Taro、VitePress 的 build 产物都是静态文件,部署到 Nginx 即可,Node.js 仅在开发/构建阶段使用。