⚡

前端开发技能Skill frontend-developer-skill

前端开发技能是构建现代Web应用程序的核心能力，涵盖React、Vue、Angular等主流框架，以及状态管理、性能优化、测试工具链和组件化开发。该技能专注于创建高性能、可维护、响应式的用户界面，适用于企业级应用、电商平台、管理后台和移动端Web开发。关键词：前端开发、React、Vue、Angular、状态管理、性能优化、Web应用、组件化、TypeScript、测试框架。

前端开发 0 次安装 46 次浏览 更新于 2/23/2026

name: frontend-developer-skill description: 构建现代Web应用的全栈前端开发专家，精通React、Vue、Angular及现代工具链，包括状态管理、测试和性能优化

前端开发技能

目的

提供完整的前端开发专业知识，用于使用现代框架（React、Vue、Next.js）构建生产就绪的Web应用程序，包括全面的工具链设置、状态管理模式、测试基础设施和性能优化策略。

使用时机

  • 从零开始构建新的React、Vue或Angular应用程序
  • 设置现代前端工具链（Vite、ESLint、Prettier、测试框架）
  • 使用Redux Toolkit、Zustand或Context API实现状态管理
  • 配置带令牌管理和受保护路由的身份验证流程
  • 为生产部署优化包大小和性能
  • 创建组件库和设计系统
  • 设置全面的测试（单元测试、集成测试、端到端测试）

快速开始

在以下情况调用此技能：

  • 构建React、Vue或Angular应用程序
  • 设置前端工具链（Vite、ESLint、Prettier）
  • 实现状态管理（Redux Toolkit、Zustand、Context）
  • 配置身份验证流程
  • 优化包大小和性能
  • 设置测试（Vitest、Jest、Playwright）

不要在以下情况调用：

  • 仅需后端API → 使用后端开发技能
  • 数据库优化 → 使用数据库优化技能
  • 仅需DevOps/部署 → 使用DevOps工程师技能
  • 无需代码的UI/UX设计 → 使用UI设计师技能

决策框架

框架选择

前端框架选择
├─ 新项目（绿地项目）
│   ├─ 需要SEO + 服务器端渲染
│   │   ├─ 团队熟悉React → Next.js 14+
│   │   ├─ 团队熟悉Vue → Nuxt.js 3+
│   │   └─ 团队灵活 → Next.js（生态系统优势）
│   │
│   ├─ 无需SSR的单页应用
│   │   ├─ 有React经验 → React 18+（Vite）
│   │   ├─ 有Vue经验 → Vue 3（Vite）
│   │   └─ 企业级/复杂表单 → Angular 15+
│   │
│   └─ 静态网站（博客、文档）
│       └─ Astro、Next.js SSG或Vite + React
│
└─ 现有项目
    └─ 继续使用现有框架（保持一致性）

状态管理选择

场景 库 包大小 使用案例
简单本地状态 useState, useReducer 0 KB 组件级状态
共享状态（2-3个组件） Context API 0 KB 主题、身份验证、简单全局状态
中型应用（<10个切片） Zustand ~1 KB 大多数应用，良好的开发体验
大型应用（10+个切片） Redux Toolkit ~11 KB 企业级应用，时间旅行调试
服务器状态 TanStack Query ~12 KB API数据、缓存

样式方法

样式决策
├─ 快速原型设计 → Tailwind CSS
├─ 组件库 → Radix UI + Tailwind
├─ 动态主题 → CSS-in-JS（Styled Components、Emotion）
├─ 大型团队 → CSS Modules或Tailwind + 设计令牌
└─ 性能关键 → 纯CSS / SCSS

最佳实践

  1. 使用函数式组件 - 现代React模式
  2. 利用钩子 - 尽可能避免类组件
  3. 记忆化昂贵操作 - 使用useMemo、useCallback
  4. 懒加载组件 - 减少初始包大小
  5. 类型化一切 - 利用TypeScript
  6. 全面测试 - 单元测试、集成测试和端到端测试
  7. 优化图像 - 使用现代格式和懒加载
  8. 实现错误边界 - 优雅地捕获错误
  9. 确保可访问性 - ARIA标签、键盘导航
  10. 监控性能 - 跟踪核心Web指标

常见模式

自定义钩子

function useFetch<T>(url: string) {
  const [data, setData] = useState<T | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    fetch(url)
      .then(res => res.json())
      .then(setData)
      .catch(setError)
      .finally(() => setLoading(false));
  }, [url]);

  return { data, loading, error };
}

容器/展示组件模式

// 展示组件（哑组件）
const UserList = ({ users, onUserClick }: UserListProps) => (
  <ul>
    {users.map(user => (
      <li key={user.id} onClick={() => onUserClick(user.id)}>
        {user.name}
      </li>
    ))}
  </ul>
);

// 容器组件（智能组件）
const UserListContainer = () => {
  const { users, fetchUsers } = useUsers();
  useEffect(() => fetchUsers(), [fetchUsers]);
  return <UserList users={users} onUserClick={handleClick} />;
};

故障排除

常见问题

状态未更新

  • 检查是否使用正确的设置器
  • 验证useEffect中的依赖数组
  • 确保组件正在重新渲染

组件未重新渲染

  • 检查不必要的重新渲染
  • 验证记忆化是否生效
  • 审查属性变化

性能问题

  • 使用React DevTools进行分析
  • 检查大包大小
  • 审查不必要的重新渲染
  • 实现代码分割

测试失败

  • 验证测试设置
  • 检查模拟实现
  • 审查异步处理
  • 确保适当的清理

质量检查清单

架构

  • [ ] 框架选择合理
  • [ ] 状态管理清晰（服务器状态与客户端状态分离）
  • [ ] 组件结构逻辑清晰
  • [ ] 已实现代码分割

代码质量

  • [ ] TypeScript严格模式已启用
  • [ ] ESLint + Prettier已配置
  • [ ] 关键路径存在测试
  • [ ] 无属性钻取（使用状态管理）

性能

  • [ ] 包大小已优化（<200KB gzipped）
  • [ ] 昂贵操作已记忆化
  • [ ] 图像已优化（懒加载、WebP）
  • [ ] 第三方库已评估

测试

  • [ ] 测试框架已配置
  • [ ] 关键路径已测试
  • [ ] 存在端到端测试

安全

  • [ ] 环境变量已保护
  • [ ] 输入已清理
  • [ ] 身份验证令牌安全
  • [ ] 依赖项已审计

集成模式

react-specialist

  • 交接： frontend-developer设置工具链 → react-specialist实现复杂组件逻辑
  • 工具： 两者都使用React；frontend-developer处理生态系统工具链

nextjs-developer

  • 交接： 当需要SSR/SEO时 → 交接给Next.js特定功能
  • 工具： frontend-developer使用Vite/CRA；nextjs-developer使用Next.js App Router

backend-developer

  • 交接： frontend-developer实现API客户端 → backend-developer提供API契约
  • 工具： frontend-developer使用Axios/Fetch、TanStack Query

frontend-ui-ux-engineer

  • 交接： frontend-developer设置组件结构 → frontend-ui-ux-engineer进行样式设计
  • 工具： 两者都使用React；frontend-ui-ux-engineer添加Framer Motion、Tailwind设计令牌

附加资源