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

前端工程化完整技术栈分模块整理Vue3/Vite 项目全覆盖一、运行环境与版本管理基础底层Node.js前端工程化核心运行时所有打包、构建、脚本工具都依赖它NVMNode 多版本管理解决不同项目 Node 版本冲突包管理器npmNode 自带yarn更快、lock 文件更稳定pnpm磁盘节省、安装速度最快现代项目首选二、构建打包工具项目编译 / 启动 / 打包核心现代主流Vue3 项目Vite开发服务器极速冷启动、按需编译Vue3TS 标准搭配Rollup打包组件库、工具类库如 Pinia、ElementPlus 底层传统老项目WebpackVue2、老 React 项目主流生态最全但打包速度慢esbuild / swc底层编译提速工具Vite、Webpack 都内置集成三、框架 语言 类型系统Vue3 Composition API业务框架TypeScript静态类型检查大型项目工程化必备减少线上 bugJSX/TSX组件语法扩展ES6/ESNext现代 JavaScript 语法工程工具自动转译兼容低版本浏览器四、路由、状态管理业务工程化分层Vue Router 4路由管理、权限路由、路由守卫工程化封装PiniaVue 官方推荐状态管理替代 VuexTS 友好、模块化可选VueUse通用组合式工具库统一封装通用逻辑五、样式工程化方案Sass/SCSS变量、嵌套、混入、全局样式统一管理CSS Modules样式隔离避免类名冲突PostCSSautoprefixer自动补全浏览器兼容前缀postcss-preset-env转换现代 CSS 语法CSS 压缩工具cssnano打包压缩样式组件库配套Element Plus / NaiveUI 主题定制、样式按需引入六、代码规范与质量管控团队工程化核心ESLintJS/TS 代码语法校验统一编码规范捕获错误代码Prettier代码自动格式化缩进、换行、引号、分号统一StylelintCSS/SCSS 样式代码校验格式化Husky lint-stagedGit 提交钩子提交代码前自动执行校验禁止不合格代码入库commitlint cz-git规范 Git 提交注释feat/fix/docs 等标准提交信息七、自动导入、按需加载工程化插件Vite 生态unplugin-vue-components组件自动导入无需手动 importunplugin-auto-importAPI 自动导入ref/reactive/router/pinia 等vite-plugin-svg-iconssvg 图标统一管理、自动注册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十二、测试体系企业级完整工程化VitestVite 配套单元测试工具替代 JestVue Test UtilsVue 组件单元测试Cypress / PlaywrightE2E 端到端自动化测试模拟用户操作页面十三、静态资源工程化图片压缩vite-plugin-image-optimizer资源分类public不打包静态资源、assets编译压缩资源字体、视频、静态文件统一规范管理十四、浏览器兼容 性能优化工程化BabelJS 语法降级兼容低版本浏览器打包优化分包chunk 分割、Tree-Shaking 删除无用代码Gzip/Brotli 压缩静态资源路由懒加载、组件按需引入性能分析vite-bundle-visualizer 查看打包体积优化大包依赖十五、编辑器工程化统一配置VS Code.vscode 统一配置文件团队共用格式化、插件推荐VolarVue3 TS 语法提示最简学习优先级按当前 Vue3Vite 项目顺序Node NVM pnpmVite TSPinia VueRouterSCSS PostCSSESLint Prettier Husky 代码规范Axios 封装、环境变量自动导入插件、Mock打包优化、CI/CD 自动化部署