前端工程化-01：前端工程化技术栈

前端工程化完整技术栈（分模块整理，Vue3/Vite 项目全覆盖）

一、运行环境与版本管理（基础底层）

1. Node.js：前端工程化核心运行时，所有打包、构建、脚本工具都依赖它
2. NVM：Node 多版本管理，解决不同项目 Node 版本冲突
3. 包管理器
   • npm：Node 自带
   • yarn：更快、lock 文件更稳定
   • pnpm：磁盘节省、安装速度最快，现代项目首选

二、构建打包工具（项目编译 / 启动 / 打包核心）

现代主流（Vue3 项目）

1. Vite：开发服务器极速冷启动、按需编译，Vue3+TS 标准搭配
2. Rollup：打包组件库、工具类库（如 Pinia、ElementPlus 底层）

传统老项目

1. Webpack：Vue2、老 React 项目主流，生态最全但打包速度慢
2. esbuild / swc：底层编译提速工具，Vite、Webpack 都内置集成

三、框架 & 语言 & 类型系统

1. Vue3 + Composition API：业务框架
2. TypeScript：静态类型检查，大型项目工程化必备，减少线上 bug
3. JSX/TSX：组件语法扩展
4. ES6+/ESNext：现代 JavaScript 语法，工程工具自动转译兼容低版本浏览器

四、路由、状态管理（业务工程化分层）

1. Vue Router 4：路由管理、权限路由、路由守卫工程化封装
2. Pinia：Vue 官方推荐状态管理，替代 Vuex，TS 友好、模块化
3. 可选：VueUse（通用组合式工具库，统一封装通用逻辑）

五、样式工程化方案

1. Sass/SCSS：变量、嵌套、混入、全局样式统一管理
2. CSS Modules：样式隔离，避免类名冲突
3. PostCSS
   • autoprefixer：自动补全浏览器兼容前缀
   • postcss-preset-env：转换现代 CSS 语法
4. CSS 压缩工具：cssnano（打包压缩样式）
5. 组件库配套：Element Plus / NaiveUI 主题定制、样式按需引入

六、代码规范与质量管控（团队工程化核心）

1. ESLint：JS/TS 代码语法校验，统一编码规范，捕获错误代码
2. Prettier：代码自动格式化（缩进、换行、引号、分号统一）
3. Stylelint：CSS/SCSS 样式代码校验格式化
4. Husky + lint-staged：Git 提交钩子，提交代码前自动执行校验，禁止不合格代码入库
5. commitlint + cz-git：规范 Git 提交注释（feat/fix/docs 等标准提交信息）

七、自动导入、按需加载工程化插件（Vite 生态）

1. unplugin-vue-components：组件自动导入，无需手动 import
2. unplugin-auto-import：API 自动导入（ref/reactive/router/pinia 等）
3. vite-plugin-svg-icons：svg 图标统一管理、自动注册
4. vite-plugin-mock：本地模拟接口，前后端分离开发不依赖后端环境

八、网络请求 & 业务工具封装

1. Axios：请求统一封装（拦截器、token、超时、错误统一处理）
2. 工具函数库：Lodash-Dayjs、qs、加密工具，统一抽离 utils 层
3. 本地存储封装：localStorage/sessionStorage/cookie 统一管理

九、环境变量 & 多环境部署工程化

1. .env / .env.development / .env.production / .env.test多环境变量区分
2. Vite 内置环境变量解析、类型声明
3. 打包区分环境：开发环境、测试环境、生产环境不同接口地址

十、Git & 版本协作工程化

1. Git：代码版本管理
2. GitFlow/GitlabFlow：团队分支管理规范（dev/test/prod 分支）
3. Gitee/GitHub/GitLab：代码仓库
4. SSH 密钥、分支保护、MR/CR 代码评审

十一、CI/CD 自动化部署（工程化上线流程）

1. 持续集成：GitHub Actions / GitLab CI / Jenkins
2. 自动化流程：代码拉取 → 安装依赖 → ESLint 校验 → 单元测试 → 打包构建
3. 自动化部署：上传静态资源到 Nginx、OSS 服务器
4. 静态托管：Nginx、阿里云 OSS、Vercel、Netlify

十二、测试体系（企业级完整工程化）

1. Vitest：Vite 配套单元测试工具，替代 Jest
2. Vue Test Utils：Vue 组件单元测试
3. Cypress / Playwright：E2E 端到端自动化测试，模拟用户操作页面

十三、静态资源工程化

1. 图片压缩：vite-plugin-image-optimizer
2. 资源分类：public（不打包静态资源）、assets（编译压缩资源）
3. 字体、视频、静态文件统一规范管理

十四、浏览器兼容 & 性能优化工程化

1. Babel：JS 语法降级兼容低版本浏览器
2. 打包优化
   • 分包（chunk 分割）、Tree-Shaking 删除无用代码
   • Gzip/Brotli 压缩静态资源
   • 路由懒加载、组件按需引入
3. 性能分析：vite-bundle-visualizer 查看打包体积，优化大包依赖

十五、编辑器工程化统一配置

1. VS Code
2. .vscode 统一配置文件（团队共用格式化、插件推荐）
3. Volar（Vue3 TS 语法提示）

最简学习优先级（按当前 Vue3+Vite 项目顺序）

1. Node + NVM + pnpm
2. Vite + TS
3. Pinia + VueRouter
4. SCSS + PostCSS
5. ESLint + Prettier + Husky 代码规范
6. Axios 封装、环境变量
7. 自动导入插件、Mock
8. 打包优化、CI/CD 自动化部署