VIP20

本课程属于：043-项目工程实践 半导体工艺与制造设备 · 共 20 门相关课程，组合学习更完整。

查看所属VIP全部课程 →

← 返回所属目录咨询 / 购买

模板工程搭建与复用实战

📚 共计 30 章节

模板工程概述

什么是模板工程 · 模板工程的价值 · 模板工程与脚手架的关系

项目初始化

从零搭建项目目录 · 配置package.json · 初始化Git仓库

构建工具选型

Webpack vs Vite vs Turbopack · 构建配置基础 · 开发服务器配置

目录结构设计

分层架构思想 · src目录规划 · 公共模块与业务模块分离

代码规范配置

ESLint集成 · Prettier配置 · EditorConfig设置 · Husky + lint-staged

质量自动化

样式方案选型

CSS Modules · Tailwind CSS · Styled Components · Sass/Less

Redux Toolkit · Zustand · Jotai · MobX 对比与选择

数据流对比

React Router / Vue Router 配置 · 懒加载 · 路由守卫 · 嵌套路由

HTTP请求封装

Axios实例化 · 请求/响应拦截器 · 错误处理 · 刷新机制

环境变量管理

多环境配置（dev/test/prod） · .env文件规范 · 运行时变量注入

组件库搭建

Button · Input · Modal等基础组件封装 · 组件文档生成（Storybook）

工具函数库

通用工具函数（日期、金额、防抖节流） · 自定义Hooks / Composables

MSW · JSON Server · Apifox Mock · 本地Mock数据

国际化方案

i18n配置 · 语言包管理 · 动态切换语言 · 日期/数字本地化

CSS变量主题 · 暗黑模式切换 · 主题持久化 · 组件级主题覆盖

路由权限 · 按钮权限 · 角色-权限模型 · 动态菜单生成

错误边界与异常处理

React Error Boundary · 全局错误捕获 · 日志上报

健壮性监控

代码分割 · 懒加载 · 图片优化 · 虚拟列表 · Web Worker

单元测试（Jest/Vitest） · 组件测试（Testing Library） · E2E测试（Playwright）

GitHub Actions / GitLab CI配置 · 自动化测试 · 自动部署

DevOps自动化

日志与监控

Sentry集成 · 性能监控（Web Vitals） · 用户行为埋点

监控可观测

包管理策略

Monorepo（pnpm workspace / Turborepo） · 依赖版本锁定 · 私有npm仓库

微前端架构

Module Federation · qiankun · Micro-app 对比与集成

微前端架构

Next.js / Nuxt.js 集成 · 静态生成 · 服务端渲染 · ISR

移动端适配

Rem/Viewport方案 · VW布局 · 移动端调试 · 触摸事件处理

移动端响应式

桌面端与PWA

Electron集成 · PWA配置（Service Worker、Manifest） · 离线缓存

低代码平台集成

表单引擎 · 页面搭建器 · 组件拖拽 · JSON Schema驱动

低代码可视化

模板复用策略

Git Template · CLI脚手架（Plop/ hygen） · 代码片段（Snippets）

版本管理与发布

Semver语义化版本 · Changelog生成 · npm publish · Tag管理

从0到1搭建企业级中后台模板 · 模板文档编写 · 团队推广与维护