在 Vue 中，前端工程化是通过工具链和规范提升开发效率、代码质量和维护性的实践。
1. 脚手架工具（Vue CLI / Vite）
作用：快速初始化项目，集成开发环境配置。
核心能力：
项目模板生成（支持 TypeScript、JSX、PWA 等）。
插件化扩展（如 Vuex、Vue Router、ESLint）。
开发服务器（热更新 HMR）。
生产环境构建优化（代码压缩、Tree Shaking）。
面试点：对比 Vue CLI（Webpack）和 Vite（基于 ES Modules）的构建速度差异（Vite 冷启动更快）。
2. 模块化与组件化
模块化：通过 ES6
import/export拆分代码逻辑，避免全局污染。组件化：
单文件组件（
.vue）封装模板、逻辑、样式。组件通信（Props/Events、Vuex/Pinia、Provide/Inject）。
复用性：全局组件、异步组件（
defineAsyncComponent）。
面试点：组件设计原则（单一职责、高内聚低耦合）。
3. 构建优化
Webpack/Vite 配置：
代码分割（SplitChunks）：按需加载，减少首包体积。
路由懒加载：
component: () => import('./View.vue')。静态资源处理：图片压缩、CSS 提取（MiniCssExtractPlugin）。
性能优化：
Tree Shaking：移除未使用代码。
缓存策略：文件名哈希（
[contenthash]）。预渲染/SSR：提升首屏加载速度（如 Nuxt.js）。
面试点：如何分析构建瓶颈（Webpack Bundle Analyzer）。
4. 代码规范与质量
工具链：
ESLint + Prettier：统一代码风格（如
@vue/eslint-config-prettier）。Stylelint：CSS 规范检查。
Husky + lint-staged：Git Hooks 提交前强制校验。
面试点：团队协作中如何保证代码一致性（通过
.eslintrc.js共享配置）。
5. 状态管理（Vuex/Pinia）
作用：集中管理共享状态，解决组件间通信复杂度。
核心概念：
State（状态）、Mutations/Actions（同步/异步修改）、Getters（计算属性）。
Pinia（Vue 3 推荐）：更简洁的 API，支持 TypeScript。
面试点：对比 Pinia 和 Vuex 的优势（Pinia 无 mutations，支持模块热更新）。
6. 自动化测试
单元测试：Jest + Vue Test Utils（测试组件逻辑）。
端到端测试：Cypress（模拟用户操作流程）。
面试点：测试策略（单元测试覆盖核心逻辑，E2E 测试关键路径）。
7. CI/CD 集成
流程：代码提交 → 自动化测试 → 构建 → 部署。
工具：GitHub Actions、Jenkins、GitLab CI。
面试点：如何通过 CI/CD 实现持续交付（如部署到 Netlify/Vercel）。
8. 工程化实践总结
目标：提升开发效率、可维护性、性能。
关键工具：Vue CLI/Vite、ESLint、Webpack/Vite、Jest、Pinia。
面试回答示例：
“Vue 前端工程化通过脚手架（Vue CLI/Vite）初始化项目，结合模块化、组件化开发。使用 Webpack/Vite 优化构建（代码分割、懒加载），通过 ESLint/Husky 保证代码质量，Pinia 管理状态，Jest/Cypress 自动化测试，最终通过 CI/CD 实现持续交付。”
高频面试问题
Vue CLI 和 Vite 的区别？
→ Vite 基于原生 ES Modules，开发环境启动快；Vue CLI 基于 Webpack，生态更成熟。如何优化首屏加载速度？
→ 路由懒加载、代码分割、预渲染（SSR）、图片压缩、CDN 资源。Pinia 相比 Vuex 的优势？
→ 更简洁的 API、无 mutations、支持 TypeScript、模块热更新。ESLint 和 Prettier 的作用？
→ ESLint 检查代码错误，Prettier 统一代码格式，通过.prettierrc配置规则。工程化中如何保证代码质量？
→ ESLint 强制规范、单元测试覆盖、Git Hooks 提交校验、Code Review