摘要本文从零开始讲解 Vue 3 前端工程化实践涵盖环境准备、项目创建、目录结构解析、项目启动、开发流程以及组合式 API 与选项式 API 的对比最后通过一个完整的用户列表数据渲染案例帮助读者快速掌握 Vue 3 工程化开发的核心技能。目录1.1 什么是前端工程化1.2 环境准备1.3 Vue 项目创建实战1.4 Vue 项目开发流程1.5 Vue API 风格对比实战案例用户列表数据渲染1.1 什么是前端工程化在深入了解 Vue 工程化之前我们先来回顾一下 Vue 是什么Vue 是一款用于构建用户界面的渐进式 JavaScript 框架官方Vue.js - 渐进式 JavaScript 框架 | Vue.js。在传统的开发模式中我们常常会遇到以下问题不规范每次开发都是从零开始缺乏统一标准。难复用组件和代码难以在不同项目中共享。难维护资源文件散乱缺乏规范化管理。因此现代企业开发更倾向于采用前端工程化的方式主要具备以下 4 个特点模块化将 JS、CSS 等资源封装成可复用的模块。组件化将 UI 组件、样式和行为封装成独立组件。规范化统一的目录结构和编码规范。自动化构建、测试、部署流程自动化。简单来说前端工程化就是将前端开发所需的工具、技术、流程和经验进行规范化和标准化。1.2 环境准备1.2.1 工具介绍create-vueVue 官方提供的脚手架工具用于快速生成工程化的 Vue 项目。主要功能统一的目录结构本地调试服务热重载Hot Module Replacement单元测试集成生产环境打包前置依赖使用 create-vue 前需要安装 Node.js 环境。1.3 Vue 项目创建实战1.3.1 项目创建步骤创建一个工程化的 Vue 项目只需执行一条命令npm create vue3.3.4配置选项详解Project name项目名称默认 vue-project。Add TypeScript?是否集成 TypeScript。Add JSX Support?是否支持 JSX 语法。Add Vue Router...是否添加路由管理。Add Pinia ...是否添加状态管理。Add Vitest ...是否添加单元测试。Add an End-to-End ...是否添加端到端测试。Add ESLint for code quality?是否添加代码质量检查。温馨提示执行上述命令会安装并运行 create-vue这是 Vue 官方的项目脚手架工具。项目创建完成后进入项目目录并安装依赖cd vue-project01 npm install注意创建项目和安装依赖需要网络连接。如果网络不稳定导致依赖下载失败可以重新执行npm install命令。1.3.2 项目结构解析使用 VS Code 打开创建好的 Vue 项目项目目录结构说明核心目录src目录是我们编写前端代码的主要位置。1.3.3 启动项目方式一命令行启动在项目根目录执行npm run dev方式二VS Code 图形界面点击 NPM 脚本面板中的dev运行按钮启动成功后访问http://localhost:51731.4 Vue 项目开发流程*.vue文件是 Vue 的单文件组件SFCSingle-File Components它将组件的逻辑、模板和样式封装在同一个文件中。1.5 Vue API 风格对比Vue 提供了两种不同的组件编写风格组合式 APIComposition APIVue 3 推荐。选项式 APIOptions APIVue 2 传统方式。组合式 API 示例script setup import { ref, onMounted } from vue; const count ref(0); // 声明响应式变量 function increment() { // 声明函数 count.value; } onMounted(() { // 生命周期钩子 console.log(组件已挂载); }); /script template button clickincrement点击计数: {{ count }}/button /template style scoped button { padding: 10px 20px; font-size: 16px; } /style核心概念setup组合式 API 的语法糖标识。ref()创建响应式数据。onMounted()组件挂载后的生命周期钩子。选项式 API 示例script export default { data() { return { count: 0 } }, methods: { increment() { this.count; } }, mounted() { console.log(组件已挂载); } } /script template button clickincrement点击计数: {{ count }}/button /template style scoped button { padding: 10px 20px; font-size: 16px; } /style重要区别组合式 API 中没有this对象而选项式 API 通过this访问组件实例。实战案例用户列表数据渲染需求使用组合式 API 实现用户列表数据渲染页面加载后发送异步请求获取数据。实现步骤在src/views目录创建UserList.vue。将原有 HTML/CSS/JS 代码迁移到 Vue 单文件组件中。安装 axios 用于发送 HTTP 请求。UserList.vue 完整代码script setup import { ref, onMounted } from vue; import axios from axios; // 响应式数据 const userList ref([]); const name ref(); const gender ref(); const job ref(); // 查询函数 const search async () { try { const response await axios.get( https://web-server.itheima.net/emps/list?name${name.value}gender${gender.value}job${job.value} ); userList.value response.data.data; } catch (error) { console.error(数据获取失败:, error); } }; // 组件挂载时自动查询 onMounted(() { search(); }); /script template div classsearch-container input typetext v-modelname placeholder请输入姓名 / select v-modelgender option value全部性别/option option value1男/option option value2女/option /select select v-modeljob option value全部职位/option option value1班主任/option option value2讲师/option option value3其他/option /select button classsearch-btn clicksearch查询/button /div table classuser-table thead tr th序号/th th姓名/th th头像/th th性别/th th职位/th th入职时间/th th更新时间/th /tr /thead tbody tr v-for(user, index) in userList :keyuser.id td{{ index 1 }}/td td{{ user.name }}/td tdimg :srcuser.image alt头像 classavatar //td td span v-ifuser.gender 1男/span span v-else-ifuser.gender 2女/span span v-else其他/span /td td span v-showuser.job 1班主任/span span v-showuser.job 2讲师/span span v-showuser.job ! 1 user.job ! 2其他/span /td td{{ user.entrydate }}/td td{{ user.updatetime }}/td /tr /tbody /table /template style scoped .search-container { width: 80%; margin: 20px auto; padding: 20px; background: #f5f5f5; border-radius: 8px; display: flex; gap: 15px; align-items: center; } .search-container input, .search-container select { flex: 1; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; } .search-btn { padding: 10px 30px; background: #42b983; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; } .search-btn:hover { background: #3aa876; } .user-table { width: 80%; margin: 20px auto; border-collapse: collapse; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .user-table th, .user-table td { border: 1px solid #ddd; padding: 12px; text-align: center; } .user-table th { background: #42b983; color: white; font-weight: bold; } .user-table tr:nth-child(even) { background: #f9f9f9; } .user-table tr:hover { background: #f1f1f1; } /style至此一个完整的用户列表数据渲染案例就完成了。通过组合式 API 配合 axios我们实现了页面加载后自动请求数据并渲染表格的效果。