# Web Dev > Web 开发最佳实践和现代前端技术栈指导 Use when this capability is needed. - Skill: `tomevault-io/web-dev` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add tomevault-io/web-dev` - Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/web-dev/raw - Safety review: pending (external: skill-scanner PASS, skillspector PASS) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: AI & ML - Author: tomevault-io (https://skillmd.com/u/tomevault-io) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/tomevault-io/web-dev --- # Web 开发技能 ## 技术栈 ### 前端框架 - **React** - 组件化 UI 库 - **Vue.js** - 渐进式框架 - **Next.js** - React 全栈框架 - **Vite** - 现代构建工具 ### 样式 - **Tailwind CSS** - 实用优先的 CSS 框架 - **CSS Modules** - 模块化 CSS - **styled-components** - CSS-in-JS ### 状态管理 - **Zustand** - 轻量级状态管理 - **Redux Toolkit** - Redux 官方工具集 - **React Query** - 服务端状态管理 ## 最佳实践 ### 组件设计 1. **单一职责** - 每个组件只做一件事 2. **可复用性** - 提取通用组件 3. **Props 接口** - 明确定义 TypeScript 接口 4. **错误边界** - 处理组件错误 ### 性能优化 - 使用 `React.memo` 避免不必要的重渲染 - 懒加载路由和组件 - 图片优化（WebP、懒加载） - 代码分割 ### 代码规范 - ESLint + Prettier - 统一的命名约定 - 组件文件结构一致 - 注释关键逻辑 ## 项目结构 ``` src/ ├── components/ # 组件 │ ├── common/ # 通用组件 │ └── features/ # 功能组件 ├── hooks/ # 自定义 Hooks ├── utils/ # 工具函数 ├── services/ # API 服务 ├── store/ # 状态管理 └── types/ # TypeScript 类型 ``` ## 常用命令 ```bash # 创建 React 项目 npm create vite@latest my-app -- --template react-ts # 创建 Next.js 项目 npx create-next-app@latest # 安装常用依赖 npm install zustand react-query axios # 开发服务器 npm run dev # 构建生产版本 npm run build ``` ## 调试技巧 1. **React DevTools** - 检查组件树和 Props 2. **Chrome DevTools** - 性能分析 3. **console.log** - 基础调试 4. **debugger** - 断点调试 ## 安全注意事项 - XSS 防护：永远不要使用 `dangerouslySetInnerHTML` 处理用户输入 - CSRF 防护：使用 CSRF token - 敏感数据：不要在前端存储敏感信息 - 依赖审计：定期运行 `npm audit` --- > Converted and distributed by [TomeVault](https://tomevault.io/claim/xpnobug) — claim your Tome and manage your conversions.