🛠️ 开发环境工具
- 包管理器
npm - Node.js 默认包管理器
pnpm - 快速、节省磁盘空间的包管理器
yarn - Facebook 开发的包管理器
作用：依赖管理、版本控制、脚本执行 - 构建工具
Vite - 下一代前端构建工具，极速的开发服务器启动和热更新
Webpack - 传统模块打包器，生态成熟
Rollup - 适合库的打包工具
esbuild - Go 编写的超快构建工具
作用：代码编译、打包、优化、热更新 - 编译器/转译器
TypeScript Compiler (tsc) - TS 编译为 JS
Babel - JavaScript 编译器，支持新特性转换
SWC - Rust 编写的超快编译器
作用：语法转换、类型检查、兼容性处理
💻 核心框架与库
- UI 框架
Vue 3 - 渐进式 JavaScript 框架
Composition API - 组合式 API
Reactivity System - 响应式系统
Teleport/Suspense - 新特性
React 18 - Facebook 开发的 UI 库
Hooks - 函数组件状态管理
Concurrent Mode - 并发模式
Server Components - 服务端组件
Angular - Google 的完整框架解决方案
Svelte - 编译时框架，无虚拟 DOM
作用：构建用户界面、组件化开发 - 状态管理
Pinia - Vue 3 推荐的状态管理
Vuex - Vue 2 经典状态管理
Redux/Redux Toolkit - React 生态状态管理
Zustand - 轻量级 React 状态管理
MobX - 响应式状态管理
作用：全局状态管理、数据共享 - 路由管理
Vue Router 4 - Vue 官方路由
React Router v6 - React 主流路由
作用：单页应用路由、导航守卫、懒加载
🎨 UI 组件库
- 通用组件库
Ant Design Vue - 企业级 UI 组件库
Element Plus - Vue 3 组件库
Naive UI - Vue 3 完整组件库
Ant Design React - React 企业级组件
Material-UI (MUI) - React Material Design
作用：快速构建界面、统一设计规范 - 移动端组件库
Vant - 轻量移动端 Vue 组件
NutUI - 京东移动端组件库
作用：移动优先的组件解决方案
📝 语言与类型系统
- TypeScript
静态类型检查
接口定义
泛型编程
装饰器
作用：提高代码质量、IDE 智能提示、减少运行时错误 - JavaScript (ES6+)
箭头函数、解构赋值
Promise、async/await
Modules、Proxy
作用：现代 JavaScript 特性
🎯 CSS 解决方案
- CSS 预处理器
Sass/SCSS
Less
Stylus
作用：变量、嵌套、混入、模块化 - CSS 框架
Tailwind CSS - 原子化 CSS
UnoCSS - 即时原子化 CSS 引擎
Bootstrap - 经典 CSS 框架
作用：快速样式开发、响应式设计 - CSS-in-JS
Styled-components - React
Emotion
作用：组件化样式、动态样式 - CSS 模块化
CSS Modules
作用：样式隔离、避免冲突
🔧 HTTP 请求库
- Axios
拦截器
请求/响应转换
自动 JSON 转换
作用：HTTP 客户端、API 调用 - Fetch API
浏览器原生 API
作用：现代化 HTTP 请求 - Vue Query / React Query
数据获取、缓存、同步
作用：服务端状态管理
📡 实时通信
- WebSocket
双向实时通信
作用：实时数据推送、在线状态 - MQTT
轻量级消息协议
作用：IoT 设备通信、低带宽场景 - Socket.io
封装 WebSocket
作用：简化实时通信开发
🗺️ 地图与可视化
- GIS 地图
Cesium - 3D 地球引擎
Mapbox GL - 矢量地图
Leaflet - 轻量级 2D 地图
OpenLayers - 开源 GIS
高德/百度地图 API
作用：地理信息展示、轨迹追踪 - 图表库
ECharts - 百度图表库
Chart.js - 简单图表
D3.js - 数据驱动文档
AntV - 蚂蚁集团可视化
作用：数据可视化、统计分析 - 3D 渲染
Three.js - WebGL 库
Babylon.js - 3D 引擎
作用：3D 场景、模型展示
🔐 认证与授权
- JWT (JSON Web Token)
无状态认证
作用：用户身份验证 - OAuth 2.0 / OIDC
第三方登录
作用：统一认证
📦 代码质量工具
- 代码规范
ESLint
代码检查
规则配置
自动修复
Prettier
代码格式化
统一风格
作用：保证代码质量、团队协作 - Git Hooks
Husky
lint-staged
作用：提交前检查、自动化流程
🧪 测试框架
- 单元测试
Vitest - Vite 原生测试框架
Jest - Facebook 测试框架
Mocha + Chai
作用：函数/组件测试 - 端到端测试
Cypress
Playwright
Puppeteer
作用：集成测试、自动化测试
🚀 性能优化
- 代码分割
路由懒加载
组件异步加载
作用：减小首屏体积 - 缓存策略
Service Workers
IndexedDB
LocalStorage/SessionStorage
作用：离线支持、性能提升 - 虚拟化
vue-virtual-scroller
react-window
作用：大数据列表渲染优化
🌐 部署与 DevOps
- 容器化
Docker
作用：环境一致性、快速部署 - CI/CD
GitHub Actions
GitLab CI
Jenkins
作用：自动化构建、测试、部署 - 静态服务器
Nginx
Apache
作用：静态资源托管
📱 跨平台方案
- 移动端
Uni-app - Vue 跨端
Taro - React 跨端
Flutter - Dart 跨端
React Native
作用：一套代码多端运行 - 桌面端
Electron
Tauri - Rust + Web
作用：Web 技术开发桌面应用
🔍 监控与分析
- 错误监控
Sentry
Fundebug
作用：异常捕获、问题定位 - 性能监控
Lighthouse
Web Vitals
作用：性能指标分析 - 埋点分析
Google Analytics
神策数据
作用：用户行为分析
🎭 其他重要技术
- PWA (Progressive Web App)
Service Worker
Manifest
作用：类原生应用体验 - 微前端
qiankun
MicroApp
作用：大型应用拆分、独立部署 - Serverless
Vercel
Netlify
阿里云 FC
作用：无服务器部署 - GraphQL
Apollo
作用：灵活的数据查询