前端技术栈知识库 | 端到端研发自动化系统

前端框架选型规则

78%

React 市场占有率 (2026)

Vue 3.5+

Vue 最新稳定版本

92%

TypeScript 采用率

~1ms

Svelte 编译速度

⚛️

React 19+ 推荐

Meta 维护 | 生态最丰富

核心优势：React 19 引入了编译器优化、Actions、Suspense 增强等特性，性能大幅提升。拥有最庞大的生态系统。

Server Components 支持
自动批处理与并发渲染
最丰富的第三方库生态
Next.js 15+ 全栈框架支持
React Native 跨平台能力

✅ 推荐使用场景

• 大型企业级应用
• 需要 SSR/SSG 的内容型网站
• 跨平台移动应用 (React Native)
• 团队已有 React 经验
• 需要最广泛的人才储备

⚠️ 注意事项

• 需要理解 Hooks 规则和依赖数组
• 过度使用 useMemo/useCallback 可能导致反模式
• 建议配合 ESLint 插件检查 Hooks 规则

💚

Vue 3.5+ 推荐

渐进式 | 易上手

核心优势：Vue 3.5 性能优化显著，组合式 API 成熟，学习曲线平缓。Nuxt 3 提供优秀的 SSR 支持。

组合式 API (Composition API)
响应式系统基于 Proxy
单文件组件 (SFC)
Nuxt 3 全栈框架
Vue Router + Pinia 官方支持

✅ 推荐使用场景

• 快速原型开发
• 中小型项目快速迭代
• 团队前端经验参差不齐
• 需要渐进式迁移老项目
• 后台管理系统

🅰️

Angular 19+

Google | 企业级

核心优势：完整的 MVC 框架，内置依赖注入、路由、表单处理。适合大型团队协作。

完整的 TypeScript 支持
依赖注入系统
RxJS 响应式编程
Angular CLI 工具链
严格的代码规范

✅ 推荐使用场景

• 超大型企业应用
• 需要严格架构规范
• 长期维护的项目
• 金融/政府等保守行业

🔥

Svelte 5+ 新兴

无虚拟 DOM | 编译时

核心优势：Svelte 5 引入 Runes 响应式原语，编译时框架，无运行时开销，包体积极小。

无虚拟 DOM，直接操作
编译时优化，性能优异
代码量减少 ~40%
SvelteKit 全栈框架
学习成本最低

✅ 推荐使用场景

• 对性能要求极高的应用
• 小型到中型项目
• 追求极致开发体验
• 嵌入式/WebAssembly 场景

📊 框架选型决策矩阵

评估维度	React 19+	Vue 3.5+	Angular 19+	Svelte 5+
学习曲线	★★★☆☆	★★★★☆	★★☆☆☆	★★★★★
性能表现	★★★★☆	★★★★☆	★★★☆☆	★★★★★
生态系统	★★★★★	★★★★☆	★★★★☆	★★★☆☆
企业采用率	★★★★★	★★★★☆	★★★★☆	★★☆☆☆
招聘难度	★★★★★	★★★★☆	★★★☆☆	★★☆☆☆

🎯 框架选型核心规则 (2026 版)

规则 1 - 默认选择：对于 80% 的企业级项目，优先选择 React 19+ 或 Vue 3.5+

规则 2 - 团队因素：如果团队已有技术栈积累，优先考虑延续性，避免盲目切换

规则 3 - 项目规模：大型复杂应用 → React/Angular；中小型快速迭代 → Vue/Svelte

规则 4 - 性能敏感：对首屏加载和运行时性能要求极高 → Svelte 5+

规则 5 - 人才储备：需要考虑长期维护和招聘 → React > Vue > Angular > Svelte

UI 组件库选型规则

🐜

Ant Design 5.x 推荐

阿里 | 企业级首选

特点：蚂蚁集团出品，国内最流行的企业级 UI 组件库，设计语言完善，组件丰富。

100+ 高质量组件
CSS-in-JS 方案 (Ant Design 5)
完善的国际化支持
Figma/Sketch 设计资源
ProComponents 高级组件

✅ 适用场景

• 企业级后台管理系统
• B 端产品
• 需要快速搭建专业界面
• React 技术栈

🧄

Element Plus 推荐

饿了么 | Vue 生态

特点：基于 Vue 3 重构，完全 TypeScript 支持，国内 Vue 项目首选组件库。

完整 Vue 3 支持
TypeScript 类型完善
按需加载优化
主题定制系统
暗黑模式支持

✅ 适用场景

• Vue 3 项目
• 后台管理系统
• 快速原型开发
• 国内 ToB 产品

🎨

Material UI (MUI) 6.x

Google MD | 国际化

特点：遵循 Google Material Design 规范，全球流行，适合面向 C 端的产品。

Material Design 3 支持
强大的主题系统
无障碍访问支持
丰富的示例和文档
MUI X 高级组件

✅ 适用场景

• 面向国际用户的产品
• C 端应用
• 需要 Material Design 风格
• 注重无障碍访问

🎭

Headless UI + Tailwind

无样式 | 高定制

特点：Tailwind Labs 出品，只提供逻辑不提供样式，完全自由定制。

零样式束缚
完美配合 Tailwind CSS
React/Vue双支持
无障碍访问内置
包体积极小

✅ 适用场景

• 需要高度定制化 UI
• 设计驱动型产品
• C 端品牌官网
• 追求极致性能

📋 组件库选型决策流程

确定框架

评估需求

选择方案

POC 验证

💡 选型建议

React 技术栈：Ant Design 5 (企业级) | MUI (国际化 C 端) | Headless UI (高定制)
Vue 技术栈：Element Plus (首选) | Naive UI (清新风格) | Vuetify (Material Design)
特殊需求：数据密集型 → Ant Design ProComponents；设计驱动 → Headless UI + Tailwind

状态管理选型规则

Zustand

React 新宠 (2026)

Pinia

Vue 官方推荐

RTK

Redux 现代化

Jotai

原子化状态

🦁

Zustand 推荐

<

轻量简洁 | React 首选

特点：极简 API，无需 Provider，支持中间件，TypeScript 友好。2026 年最流行的 React 状态管理方案。

零样板代码
无需 Provider 包裹
支持 DevTools
中间件生态丰富
订阅粒度精细

                        import { create } from 'zustand'

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 }))
}))
                    

🔴

Redux Toolkit

经典方案 | 大型应用

特点：Redux 官方推荐的现代化写法，简化样板代码，适合复杂状态管理场景。

createSlice 简化 Reducer
createAsyncThunk 处理异步
RTK Query 数据获取
时间旅行调试
成熟的中间件生态

✅ 适用场景

• 超大型应用
• 复杂的状态依赖关系
• 需要时间旅行调试
• 团队熟悉 Redux 模式

🍍

Pinia 推荐

Vue 官方 | Vuex 继任者

特点：Vuex 官方继任者，更好的 TypeScript 支持，更简洁的 API，Vue 3 首选。

完美的 TS 支持
无需 mutations
支持 Composition API
模块化设计
DevTools 集成

                        import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  actions: {
    increment() { this.count++ }
  }
})
                    

⚛️

Jotai

原子化 | 细粒度

特点：基于原子概念的细粒度状态管理，适合需要精确控制更新粒度的场景。

原子化状态单元
细粒度更新
支持派生状态
React 原生兼容
服务端渲染支持

🎯 状态管理选型核心规则

规则 1 - 简单优先：能不用全局状态就不用，优先使用组件本地状态 + Props

规则 2 - React 项目：默认选择 Zustand，复杂场景考虑 Redux Toolkit

规则 3 - Vue 项目：无条件选择 Pinia，不再考虑 Vuex

规则 4 - 原子化需求：需要细粒度控制 → Jotai/Recoil

规则 5 - 服务端状态：API 数据缓存 → TanStack Query (React Query) / SWR

💡 2026 年最佳实践组合

React 技术栈：Zustand (客户端状态) + TanStack Query (服务端状态) + React Hook Form (表单)
Vue 技术栈：Pinia (全局状态) + Vue Query (服务端状态) + VeeValidate (表单)

构建工具选型规则

⚡

Vite 6.x 强烈推荐

极速启动 | 现代标准

特点：基于原生 ESM，冷启动秒开，HMR 即时更新。2026 年前端构建工具的绝对主流选择。

基于 esbuild 的预打包
原生 ESM 热更新
Rollup 生产构建
丰富的插件生态
框架无关支持

✅ 适用场景

• 90% 的现代前端项目
• 需要快速开发体验
• React/Vue/Svelte/Preact
• 库开发 (vite build lib)

📦

Webpack 6.x

成熟稳定 | 特殊场景

特点：2026 年路线图聚焦简化配置，内置常用功能。适合有特殊构建需求的场景。

CSS Modules 内置
TypeScript 转译内置
通用 Target 支持
最成熟的插件生态
微前端场景支持好

⚠️ 使用建议

除非有以下需求，否则优先选择 Vite：
• 复杂的代码分割策略
• 特殊的 Loader 需求
• 遗留项目迁移成本高

🔺

Turbopack Next.js 专用

Rust 驱动 | Next.js

特点：Vercel 开发的 Rust 构建工具，Next.js 15+ 默认构建引擎，性能优异。

Rust 编写，性能卓越
Next.js 深度集成
增量计算优化
并行处理能力
持续迭代中

✅ 适用场景

• Next.js 15+ 项目
• 追求极致构建性能
• 愿意尝试新技术
• Vercel 部署

🦀

Rspack

国产之光 | Webpack 兼容

特点：字节开源的 Rust 构建工具，Webpack 兼容，迁移成本低，性能提升明显。

Webpack 配置兼容
Rust 高性能实现
增量编译支持
国内社区活跃
Module Federation 支持

✅ 适用场景

• Webpack 项目性能优化
• 需要 Rust 性能但保持兼容
• 微前端架构
• 国内团队优先

📊 构建工具对比分析

维度	Vite 6	Webpack 6	Turbopack	Rspack
开发启动速度	⚡⚡⚡⚡⚡	⚡⚡⚡	⚡⚡⚡⚡⚡	⚡⚡⚡⚡⚡
HMR 更新速度	⚡⚡⚡⚡⚡	⚡⚡⚡	⚡⚡⚡⚡⚡	⚡⚡⚡⚡
生产构建速度	⚡⚡⚡⚡	⚡⚡⚡	⚡⚡⚡⚡⚡	⚡⚡⚡⚡⚡
配置复杂度	⭐ (简单)	⭐⭐⭐⭐ (复杂)	⭐ (简单)	⭐⭐ (中等)
生态成熟度	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐
推荐指数	🌟🌟🌟🌟🌟	🌟🌟🌟	🌟🌟🌟🌟 (Next.js)	🌟🌟🌟🌟

🎯 构建工具选型核心规则

规则 1 - 默认选择：2026 年新项目，无脑选择 Vite 6

规则 2 - Next.js 项目：Next.js 15+ 使用默认的 Turbopack

规则 3 - Webpack 迁移：老项目性能优化 → 评估迁移 Vite 或使用 Rspack 兼容方案

规则 4 - 特殊需求：微前端/Module Federation → Rspack 或 Webpack 5+

规则 5 - 库开发：NPM 包开发 → Vite Lib Mode 或 tsdown (AI 优化)

TypeScript 最佳实践规范

92%

前端项目 TS 采用率

TS 5.7+

2026 最新稳定版

-40%

Bug 率降低

+30%

开发效率提升

📘 TypeScript 配置规范 (tsconfig.json)

                        {
  "compilerOptions": {
    "target": "ES2022",
    "lib": ["ES2022", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "moduleResolution": "bundler",
    "jsx": "react-jsx",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedIndexedAccess": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "declaration": true,
    "declarationMap": true,
    "sourceMap": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}
                    

⚛️

React + TypeScript 模式

❌ 避免的模式 (2026)

                            // 不要使用 React.FC (隐式 children)
const Component: React.FC<Props> = ...

// 不要使用 any
const data: any = ...
                        

✅ 推荐模式

                            // 函数组件定义
interface Props {
  name: string;
  age?: number;
}

function UserCard({ name, age }: Props) {
  return <div>{name}</div>;
}

// 事件处理器
const handleClick = (
  e: React.MouseEvent<HTMLButtonElement>
) => { ... }

// Ref 类型
const inputRef = useRef<HTMLInputElement>(null);
                        

🛠️

常用工具类型

                            // Partial - 所有属性可选
type PartialUser = Partial<User>;

// Required - 所有属性必填
type RequiredUser = Required<User>;

// Pick - 选取指定属性
type UserName = Pick<User, 'name'>;

// Omit - 排除指定属性
type UserWithoutId = Omit<User, 'id'>;

// Record - 键值映射
type UserMap = Record<string, User>;

// 条件类型
type Nullable<T> = T | null;
type Async<T> = Promise<T>;
                        

🎯 TypeScript 使用规范

规则 1 - 严格模式：必须开启 strict: true，禁止使用 any

规则 2 - 接口定义：公共 API 使用 interface，内部类型用 type

规则 3 - 泛型约束：泛型必须有明确的 extends 约束

规则 4 - 类型推导：让 TS 自动推导，避免冗余类型声明

规则 5 - 类型安全：开启 noUncheckedIndexedAccess 防止未定义访问

前端技术方案设计模板

📋 前端技术方案模板

                        # 前端技术方案设计文档

## 1. 项目概述
- 项目名称：[填写]
- 项目类型：[ToB 后台 / ToC 应用 / 移动端 / 其他]
- 预期用户规模：[填写]
- 核心业务目标：[填写]

## 2. 技术选型

### 2.1 前端框架
**选择：** [React 19+ / Vue 3.5+ / 其他]
**理由：**
- [根据选型规则说明]

### 2.2 UI 组件库
**选择：** [Ant Design 5 / Element Plus / 其他]
**理由：**
- [根据选型规则说明]

### 2.3 状态管理
**选择：** [Zustand / Pinia / Redux Toolkit]
**理由：**
- [根据选型规则说明]

### 2.4 构建工具
**选择：** [Vite 6 / Turbopack / 其他]
**理由：**
- [根据选型规则说明]

### 2.5 其他核心依赖
- 路由：[React Router v7 / Vue Router v4]
- HTTP 客户端：[Axios / Fetch API]
- 服务端状态：[TanStack Query / SWR]
- 表单处理：[React Hook Form / VeeValidate]
- CSS 方案：[Tailwind CSS / CSS Modules / Styled Components]

## 3. 项目架构

### 3.1 目录结构
```
src/
├── components/     # 通用组件
├── pages/         # 页面组件
├── hooks/         # 自定义 Hooks
├── stores/        # 状态管理
├── services/      # API 服务
├── utils/         # 工具函数
├── types/         # TypeScript 类型
├── styles/        # 全局样式
└── assets/        # 静态资源
```

### 3.2 技术架构图
[绘制架构图]

## 4. 开发规范

### 4.1 代码规范
- ESLint 配置
- Prettier 配置
- Commit 规范

### 4.2 命名规范
- 组件：PascalCase
- 文件：kebab-case
- 常量：UPPER_SNAKE_CASE

## 5. 性能优化策略
- 代码分割
- 懒加载
- 图片优化
- 缓存策略

## 6. 测试策略
- 单元测试：[Vitest / Jest]
- E2E 测试：[Playwright / Cypress]

## 7. 部署方案
- CI/CD 流程
- Docker 配置
- K8S 部署

## 8. 风险评估
- [列出潜在风险及应对方案]
                    

💡 AI Coding 集成说明

本知识库已集成到 OpenClaw + Claude Code 端到端研发自动化系统，AI Coding 节点将自动根据此知识库进行技术选型和代码生成。

人机协同点：Tech Lead 审核技术选型 → AI 生成基础架构 → 工程师补充业务逻辑 → AI 生成测试用例

🚀 前端技术栈知识库

前端框架选型规则

✅ 推荐使用场景

⚠️ 注意事项

✅ 推荐使用场景

✅ 推荐使用场景

✅ 推荐使用场景

📊 框架选型决策矩阵

🎯 框架选型核心规则 (2026 版)

UI 组件库选型规则

✅ 适用场景

✅ 适用场景

✅ 适用场景

✅ 适用场景

📋 组件库选型决策流程

💡 选型建议

状态管理选型规则

✅ 适用场景

🎯 状态管理选型核心规则

💡 2026 年最佳实践组合

构建工具选型规则

✅ 适用场景

⚠️ 使用建议

✅ 适用场景

✅ 适用场景

📊 构建工具对比分析

🎯 构建工具选型核心规则

TypeScript 最佳实践规范

📘 TypeScript 配置规范 (tsconfig.json)

❌ 避免的模式 (2026)

✅ 推荐模式

🎯 TypeScript 使用规范

前端技术方案设计模板

📋 前端技术方案模板

💡 AI Coding 集成说明