前端工程化-01：前端工程化技术栈
前端工程化完整技术栈（分模块整理，Vue3/Vite 项目全覆盖）
一、运行环境与版本管理（基础底层）
- Node.js：前端工程化核心运行时，所有打包、构建、脚本工具都依赖它
- NVM：Node 多版本管理，解决不同项目 Node 版本冲突
- 包管理器
- npm：Node 自带
- yarn：更快、lock 文件更稳定
- pnpm：磁盘节省、安装速度最快，现代项目首选
二、构建打包工具（项目编译 / 启动 / 打包核心）
现代主流（Vue3 项目）
- Vite：开发服务器极速冷启动、按需编译，Vue3+TS 标准搭配
- Rollup：打包组件库、工具类库（如 Pinia、ElementPlus 底层）
传统老项目
- Webpack：Vue2、老 React 项目主流，生态最全但打包速度慢
- esbuild / swc：底层编译提速工具，Vite、Webpack 都内置集成
三、框架 & 语言 & 类型系统
- Vue3 + Composition API：业务框架
- TypeScript：静态类型检查，大型项目工程化必备，减少线上 bug
- JSX/TSX：组件语法扩展
- ES6+/ESNext：现代 JavaScript 语法，工程工具自动转译兼容低版本浏览器
四、路由、状态管理（业务工程化分层）
- Vue Router 4：路由管理、权限路由、路由守卫工程化封装
- Pinia：Vue 官方推荐状态管理，替代 Vuex，TS 友好、模块化
- 可选：VueUse（通用组合式工具库，统一封装通用逻辑）
五、样式工程化方案
- Sass/SCSS：变量、嵌套、混入、全局样式统一管理
- CSS Modules：样式隔离，避免类名冲突
- PostCSS
- autoprefixer：自动补全浏览器兼容前缀
- postcss-preset-env：转换现代 CSS 语法
- CSS 压缩工具：cssnano（打包压缩样式）
- 组件库配套：Element Plus / NaiveUI 主题定制、样式按需引入
六、代码规范与质量管控（团队工程化核心）
- ESLint：JS/TS 代码语法校验，统一编码规范，捕获错误代码
- Prettier：代码自动格式化（缩进、换行、引号、分号统一）
- Stylelint：CSS/SCSS 样式代码校验格式化
- Husky + lint-staged：Git 提交钩子，提交代码前自动执行校验，禁止不合格代码入库
- commitlint + cz-git：规范 Git 提交注释（feat/fix/docs 等标准提交信息）
七、自动导入、按需加载工程化插件（Vite 生态）
- unplugin-vue-components：组件自动导入，无需手动 import
- unplugin-auto-import：API 自动导入（ref/reactive/router/pinia 等）
- vite-plugin-svg-icons：svg 图标统一管理、自动注册
- vite-plugin-mock：本地模拟接口，前后端分离开发不依赖后端环境
八、网络请求 & 业务工具封装
- Axios：请求统一封装（拦截器、token、超时、错误统一处理）
- 工具函数库：Lodash-Dayjs、qs、加密工具，统一抽离 utils 层
- 本地存储封装：localStorage/sessionStorage/cookie 统一管理
九、环境变量 & 多环境部署工程化
.env / .env.development / .env.production / .env.test多环境变量区分- Vite 内置环境变量解析、类型声明
- 打包区分环境：开发环境、测试环境、生产环境不同接口地址
十、Git & 版本协作工程化
- Git：代码版本管理
- GitFlow/GitlabFlow：团队分支管理规范（dev/test/prod 分支）
- Gitee/GitHub/GitLab：代码仓库
- SSH 密钥、分支保护、MR/CR 代码评审
十一、CI/CD 自动化部署（工程化上线流程）
- 持续集成：GitHub Actions / GitLab CI / Jenkins
- 自动化流程：代码拉取 → 安装依赖 → ESLint 校验 → 单元测试 → 打包构建
- 自动化部署：上传静态资源到 Nginx、OSS 服务器
- 静态托管：Nginx、阿里云 OSS、Vercel、Netlify
十二、测试体系（企业级完整工程化）
- Vitest：Vite 配套单元测试工具，替代 Jest
- Vue Test Utils：Vue 组件单元测试
- Cypress / Playwright：E2E 端到端自动化测试，模拟用户操作页面
十三、静态资源工程化
- 图片压缩：vite-plugin-image-optimizer
- 资源分类：public（不打包静态资源）、assets（编译压缩资源）
- 字体、视频、静态文件统一规范管理
十四、浏览器兼容 & 性能优化工程化
- Babel：JS 语法降级兼容低版本浏览器
- 打包优化
- 分包（chunk 分割）、Tree-Shaking 删除无用代码
- Gzip/Brotli 压缩静态资源
- 路由懒加载、组件按需引入
- 性能分析：vite-bundle-visualizer 查看打包体积，优化大包依赖
十五、编辑器工程化统一配置
- VS Code
- .vscode 统一配置文件（团队共用格式化、插件推荐）
- Volar（Vue3 TS 语法提示）
最简学习优先级（按当前 Vue3+Vite 项目顺序）
- Node + NVM + pnpm
- Vite + TS
- Pinia + VueRouter
- SCSS + PostCSS
- ESLint + Prettier + Husky 代码规范
- Axios 封装、环境变量
- 自动导入插件、Mock
- 打包优化、CI/CD 自动化部署