企业官网建设流程全解析

摘要：本文从零开始讲解 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-vue：Vue 官方提供的脚手架工具，用于快速生成工程化的 Vue 项目。
• 主要功能：
  • 统一的目录结构
  • 本地调试服务
  • 热重载（Hot Module Replacement）
  • 单元测试集成
  • 生产环境打包
• 前置依赖：使用 create-vue 前需要安装 Node.js 环境。

1.3 Vue 项目创建实战

1.3.1 项目创建步骤

创建一个工程化的 Vue 项目，只需执行一条命令：

npm create vue@3.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:5173

1.4 Vue 项目开发流程

*.vue文件是 Vue 的单文件组件（SFC，Single-File Components），它将组件的逻辑、模板和样式封装在同一个文件中。

1.5 Vue API 风格对比

Vue 提供了两种不同的组件编写风格：

• 组合式 API（Composition API）：Vue 3 推荐。
• 选项式 API（Options API）：Vue 2 传统方式。

组合式 API 示例

<script setup> import { ref, onMounted } from 'vue'; const count = ref(0); // 声明响应式变量 function increment() { // 声明函数 count.value++; } onMounted(() => { // 生命周期钩子 console.log('组件已挂载'); }); </script> <template> <button @click="increment">点击计数: {{ 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 @click="increment">点击计数: {{ count }}</button> </template> <style scoped> button { padding: 10px 20px; font-size: 16px; } </style>

重要区别：组合式 API 中没有this对象，而选项式 API 通过this访问组件实例。

实战案例：用户列表数据渲染

需求：使用组合式 API 实现用户列表数据渲染，页面加载后发送异步请求获取数据。

实现步骤：

1. 在src/views目录创建UserList.vue。
2. 将原有 HTML/CSS/JS 代码迁移到 Vue 单文件组件中。
3. 安装 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 class="search-container"> <input type="text" v-model="name" placeholder="请输入姓名" /> <select v-model="gender"> <option value="">全部性别</option> <option value="1">男</option> <option value="2">女</option> </select> <select v-model="job"> <option value="">全部职位</option> <option value="1">班主任</option> <option value="2">讲师</option> <option value="3">其他</option> </select> <button class="search-btn" @click="search">查询</button> </div> <table class="user-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" :key="user.id"> <td>{{ index + 1 }}</td> <td>{{ user.name }}</td> <td><img :src="user.image" alt="头像" class="avatar" /></td> <td> <span v-if="user.gender == 1">男</span> <span v-else-if="user.gender == 2">女</span> <span v-else>其他</span> </td> <td> <span v-show="user.job == 1">班主任</span> <span v-show="user.job == 2">讲师</span> <span v-show="user.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，我们实现了页面加载后自动请求数据并渲染表格的效果。