React、Vue 技术栈大纲

一、React 技术栈‌

‌1. 核心库‌

• ‌React‌：组件化开发、JSX 语法、Hooks API（useState, useEffect 等）
• ‌React DOM‌：Web 端渲染库

‌2. 状态管理‌

• ‌Redux‌（经典方案）：Action/Reducer/Store 模式，配合中间件（redux-thunk, redux-saga）
• ‌Redux Toolkit‌（现代简化版）：内置 Immer 和异步处理
• ‌Context API‌：轻量级状态共享
• ‌MobX‌ / ‌Recoil‌：响应式状态管理替代方案

‌3. 路由‌

• ‌React Router‌：BrowserRouter, Route, Link 等核心 API
• ‌Next.js 路由‌（SSR 框架）：文件系统约定式路由

‌4. 工程化工具‌

• ‌Webpack‌ / ‌Vite‌：构建工具
• ‌Babel‌：ES6+ 语法转换、JSX 编译
• ‌**Create React App (CRA)**‌：快速脚手架

‌5. UI 组件库‌

• ‌Ant Design‌ / ‌**Material-UI (MUI)**‌：企业级 UI 库
• ‌Chakra UI‌ / ‌React-Bootstrap‌：轻量级 UI 方案

‌6. 测试‌

• ‌Jest‌：单元测试框架
• ‌React Testing Library‌：组件交互测试
• ‌Cypress‌：E2E 测试

‌7. 扩展生态‌

• ‌Next.js‌：服务端渲染 (SSR)、静态生成 (SSG)
• ‌TypeScript‌：类型系统集成
• ‌Styled Components‌ / ‌Emotion‌：CSS-in-JS 方案
• ‌React Query‌ / ‌SWR‌：数据请求与缓存管理

---

‌二、Vue 技术栈‌

‌1. 核心库‌

• ‌Vue 2/3‌：选项式 API、组合式 API（Composition API）、模板语法
• ‌Vue Router‌：路由管理
• ‌Vuex‌（Vue 2 官方状态管理） / ‌Pinia‌（Vue 3 推荐状态管理）

‌2. 工程化工具‌

• ‌Vue CLI‌：传统脚手架
• ‌Vite‌（现代推荐）：超快构建工具
• ‌Webpack‌：复杂项目定制化构建

‌3. UI 组件库‌

• ‌Element Plus‌（Vue 3） / ‌Element UI‌（Vue 2）
• ‌Vuetify‌：Material Design 风格组件库
• ‌Naive UI‌ / ‌Ant Design Vue‌：灵活轻量方案

‌4. 测试‌

• ‌Vitest‌ / ‌Jest‌：单元测试
• ‌Vue Test Utils‌：官方组件测试库
• ‌Cypress‌ / ‌Playwright‌：E2E 测试

‌5. 扩展生态‌

• ‌Nuxt.js‌：服务端渲染 (SSR)、静态生成 (SSG)
• ‌TypeScript‌：官方类型支持
• ‌VueUse‌：组合式工具函数集合
• ‌Vuelidate‌ / ‌FormKit‌：表单验证方案

---

‌三、通用技术栈（React/Vue 共用）‌

• ‌Axios‌ / ‌Fetch API‌：HTTP 请求
• ‌GraphQL‌（Apollo Client / urql）：替代 REST 的数据查询
• ‌ESLint‌ / ‌Prettier‌：代码规范与格式化
• ‌Sass‌ / ‌Less‌：CSS 预处理器
• ‌Git‌：版本控制（分支管理、协作流程）

---

‌四、技术栈掌握程度标志‌

• ‌初级‌：能基于文档实现基础功能（组件开发、路由跳转）
• ‌中级‌：熟悉状态管理、工程化配置、性能优化
• ‌高级‌：能定制脚手架、封装通用解决方案、主导复杂项目架构设计

---

通过掌握上述技术栈，可覆盖企业级 React/Vue 项目的开发需求。实际应用中需根据项目需求灵活组合（如：React + Redux Toolkit + AntD + Vite 或 Vue3 + Pinia + Element Plus + Nuxt）。