📘
前端规范 · 协作实战
🎯 30 章完整体系
v2.0
📚 课程目录
30 / 30
⚡ 点击卡片跳转章节
🧩 友好配色
01
前端工程化概述
什么是前端工程化 · 为什么需要规范 · 团队协作痛点分析
➔
02
开发环境统一
Node.js版本管理(nvm) · 包管理器(pnpm/yarn) · EditorConfig
➔
03
代码格式化利器
Prettier安装配置 · 编辑器集成 · 团队统一格式化策略
➔
04
JavaScript编码规范
命名规范(变量/函数/类) · JSDoc注释 · 语句与表达式规范
➔
05
TypeScript编码规范
类型定义 · 泛型原则 · any禁忌 · interface与type选择
➔
06
CSS/SCSS编码规范
BEM命名 · 样式嵌套深度 · CSS变量 · Reset与Normalize
➔
07
React/JSX编码规范
组件命名 · Props类型 · Hooks规则 · 状态管理规范
➔
08
Vue编码规范
单文件组件结构 · Composition API · Props/Emits命名 · 模板指令
➔
09
Git分支管理策略
GitFlow vs Trunk-Based · 分支命名 · Conventional Commits
➔
10
Code Review流程
Review清单 · 有效意见 · 冲突处理 · 自动化检查集成
➔
11
ESLint深度配置
规则集(standard/airbnb) · 自定义规则 · 与Prettier协同
➔
12
Stylelint样式检查
CSS/SCSS规则配置 · 编辑器集成 · 常见问题处理
➔
13
Commitlint与Husky
提交信息校验 · Git Hooks · lint-staged · 自动化流程
➔
14
项目目录结构规范
分层架构 · 模块划分 · 公共资源 · 页面与组件组织
➔
15
组件设计规范
原子设计 · 组件粒度 · 通用/业务组件分离 · 组件文档
➔
16
API接口规范
RESTful设计 · 请求/响应格式 · 错误处理 · Mock策略
➔
17
状态管理规范
全局/局部状态划分 · Redux/Zustand · 状态持久化
➔
18
路由设计规范
路由配置管理 · 懒加载 · 权限控制 · 路由守卫
➔
19
构建工具配置
Webpack/Vite配置 · 环境变量 · 构建优化 · 多环境
➔
20
测试规范
单元测试(Jest/Vitest) · 组件测试 · E2E(Cypress) · 覆盖率
➔
21
文档规范
README编写 · API文档 · Storybook · Changelog管理
➔
22
包管理规范
npm发布流程 · SemVer版本号 · 依赖管理 · 私有包
➔
23
性能优化规范
Lighthouse指标 · 代码分割 · 图片优化 · 缓存 · 性能预算
➔
24
安全编码规范
XSS/CSRF防护 · 输入验证 · 敏感信息 · 依赖安全审计
➔
25
国际化规范
i18n方案 · 翻译文件管理 · 日期/数字格式化 · RTL布局
➔
26
日志与监控规范
前端日志分级 · Sentry错误上报 · 性能监控 · 行为追踪
➔
27
CI/CD流程规范
Pipeline设计 · 自动化测试 · 构建部署 · 回滚策略
➔
28
团队协作工具
Jira/飞书 · Confluence/语雀 · Slack/钉钉 · Figma
➔
29
规范落地实践
推广策略 · 渐进式迁移 · 自动化检查 · 团队培训
➔
30
持续改进机制
规范版本迭代 · 团队反馈 · 行业趋势 · 定期复盘
➔