企业官网建设流程全解析

简介：这是一份面向高校Web前端开发课程学习者的Vue.js期末综合实践项目，聚焦MVVM框架核心能力训练，适用于掌握基础语法后进行实战巩固的学生。资源完整实现新冠疫情防疫信息管理功能，包括动态天气切换、姓名案例交互、风险地区增删与无序列表渲染、感染者表单录入及实时展示等模块，各功能独立封装便于复用为教学模板。压缩包共5个文件（3个JS脚本实现数据代理、事件处理、监视属性与条件/列表渲染逻辑，1个CSS负责样式绑定与布局，1个HTML作为入口页面），总大小164KB，结构精简、即开即用。已有2033人学习下载，提供可直接运行的完整代码方案，涵盖数据绑定、事件修饰符、响应式样式控制等关键知识点，是理解Vue响应式原理与工程化组织方式的优质入门范例。 期末季又到了，每年这个时候我后台收到的私信里，至少有一半是同一个问题：Vue大作业到底怎么做才能拿高分？不瞒你说，看到“Web前端开发-Vue期末满分大作业”这个标题的时候，我特别有共鸣——因为我大学时候也是从“照着教程敲一个Todo List”的状态，一步步做到能独立交付一个像模像样的Vue项目的。这篇内容不灌鸡汤，我直接把我当时做满分大作业的完整思路、选题方法、技术栈选择、核心代码实现和踩过的坑全部整理出来。不管你手上是已经写了一半的代码，还是连Vue项目都没建过的萌新，按着这条线走，至少能让你的作业质量从“能跑”提升到“拿得出手”。

我的经验是：期末大作业拿满分，靠的从来不是某个炫酷的动画或者花哨的组件，而是三件事：选题有现实感、功能闭环完整、代码结构能体现出“工程素养”。这篇文章会把这三个层面全部拆开讲，从怎么选题目、怎么规划模块，到手把手写出登录鉴权、路由守卫、数据可视化、搜索分页这些核心功能，最后再送一份答辩演示的小技巧。都是实战向的内容，你直接照着做就行。

1. 满分大作业的选题与整体设计思路

1.1 什么样的选题天生自带高分基因

很多同学做期末大作业的第一步就错了——直接去网上搜“XXX管理系统源码”，下载下来改个标题就交了。先不说查重和抄袭风险，你就想一个问题：老师看了三年“图书管理系统”，突然看到你的也是“图书管理系统”，他能给高分吗？

我自己的选题原则是：给一个常见的业务场景，加上一层“数据感”和“角色感”。什么叫数据感？就是这个系统里必须存在大量可以统计分析的数据。什么叫角色感？就是系统不能只有一个用户，至少要有两种角色，比如普通用户和管理员。

推荐几个我亲眼见过拿高分的选题方向：

• 校园二手交易平台：商品发布、图片上传、按分类筛选、卖家/买家身份切换，最后再来一个“各分类商品数量统计”和“价格区间分布”，数据可视化就有的写了。
• 班级成绩分析系统：录入学生成绩，自动算平均分/及格率，按科目生成折线图，按班级生成柱状图。这个选题特别讨巧，因为数据本身就是数字，可视化做起来非常顺手。
• 个人记账本：收入支出流水、分类管理、月度趋势图，还有预算提醒。逻辑简单，但界面可以做得非常精致。
• 自习室预约系统：选座位、限定时段、后台审核预约记录。这个题目能做日历组件、选座交互，非常容易出亮点。

判断一个选题值不值得做，我总结了三个标准，你拿自己的题目对照一下：

1. 有没有至少3张以上的“数据图表”可以做。如果全程只有表格和表单，没有折线图、柱状图、饼图这类内容，就很难体现出你“会用数据可视化”的能力。
2. 有没有“多角色”的业务场景。这直接决定了你能不能写登录鉴权、路由守卫这类加分功能。
3. 有没有“表单联动”的交互细节。比如选择省份后联动城市、选择商品分类后联动子分类，这些交互是展示你“能处理复杂数据关系”的最好机会。

我当时选的题目是“班级事务管理平台”，包含了公告发布、活动报名、经费记录三个模块，再加上管理员端和普通成员端。整个系统做下来大概2800行代码，功能不多，但每个模块都很完整，答辩的时候老师连问了三四个功能细节都答上来了，最后给了满分。选题真的不需要大，完整度永远比规模重要。

提示：如果老师已经给出了固定题目，也不用慌。题目固定不变，但你可以让功能“超出预期”，比如别人只做了增删改查，你额外做一个数据看板，这本身就是分数差距。

1.2 功能模块怎么拆，才能让老师一眼看到工作量

选题定下来之后，最重要的一步就是把“业务需求”翻译成“前端功能模块”。这一步做得越细，后面写代码就越不容易卡壳。

我一般会用思维导图把一个项目拆成四层来分析：

第一层：用户角色。这个系统有谁在用？登录进来后看到的东西有什么不同？把角色拆出来，后续的权限控制、路由拦截就都有了落脚点。

第二层：核心业务模块。就是每个角色能干什么。比如学生能报名活动、查看公告；管理员能发布活动、审核报名记录、查看经费报表。这里尽量拆到“动词+名词”的粒度，比如“发布公告”“导出报表”“修改密码”，每个动作都对应前端的一个页面或一个弹窗。

第三层：公共支撑模块。包括登录注册、个人中心、消息提醒、通用搜索、分页管理等。这些功能看起来不起眼，但恰恰是体现工程化能力的地方——把公共组件抽出来复用，代码量会减少很多，结构也更清晰。

第四层：数据统计与可视化。这是最容易拉开分数差距的部分。别说什么“我不会图表”，ECharts的官方示例库直接复制改数据就行。关键是你要想清楚“哪些页面需要图表”，比如首页仪表盘放一个总览统计、列表页放一个分布分析、详情页放一段趋势折线。图表不需要多，3张就能撑起场面。

把这四层拆完，你会发现原本模糊的“做一个管理系统”变得非常具体：有登录注册页、有N个业务页面、有公共组件、有图表展示。接下来要做的，就是把每个模块对应的页面、组件、接口、数据结构列成一张清单，直接当开发计划用。

1.3 技术栈选型：vue3还是vue2，关键看课程要求

这是很多人纠结的第一件事。我的建议非常直接：除非老师明确要求用Vue 2，否则一律用Vue 3。原因很简单：Vue 3已经是绝对的主流，Composition API写出来的代码结构清晰，而且Element Plus、Pinia这些配套生态也都很成熟了。

但有一个例外——如果你的课程课件、教材全是Vue 2的内容，老师课件里的示例代码也全是Vue 2的写法，那你就要慎重了。期末大作业的核心目标永远是“迎合课程要求拿高分”，而不是“展示最新技术”。遇到这种情况，你可以继续用Vue 2，或者用Vue 3但把Composition API和Options API的差异在答辩时一句话带过，表明你知道两者的区别。

下面这张表是我常用的技术栈搭配，直接抄作业：

这里单独说一下构建工具：Vue 3官方推荐的Vite启动速度比Webpack快好几个量级，开发体验是真的舒服，我现在日常工作也在用Vite。但你如果用的是Vue 2，那就只能用Vue CLI，没有别的选择。

组件库优先选Element Plus，因为它对Vue 3的支持最完善，而且是国内用得最多的Vue组件库，你遇到任何问题基本上都能搜到答案。如果做的项目偏移动端，比如H5页面，可以考虑用Vant。图表库不用犹豫，直接上ECharts，功能强大、文档中文友好、属性齐全。一个关键秘诀是：ECharts官方示例库的代码，直接复制到你项目里，只改数据和几个配置项，就能达到“专业可视化”的效果。

2. 从零到一：项目初始化与环境配置

2.1 开发环境准备：Node版本和必装插件

工欲善其事，必先利其器。很多同学的项目跑不起来，根本不是代码的问题，而是环境没配对。先确认三样东西的版本：

node -v npm -v

Node.js建议安装LTS版本（长期支持版），我用的是18.x。这里有个重要提示：Node版本太老或太新都可能导致依赖安装失败。如果你用的是Vite创建项目，Node必须 ≥ 14.18；如果你在使用Vue CLI，Node ≥ 12.0即可。如果npm install时报错ERESOLVE dependency resolution，八成是Node和npm版本不匹配，升级Node或者清掉node_modules重装都能解决。

编辑器方面，VSCode够用，但有两个插件必须装。第一是Volar（注意不是Vetur），Vue 3项目的语法高亮、模板提示都靠它。Vetur是Vue 2时代的插件，装到Vue 3项目里反而会出现提示失效的问题。第二是ESLint，它能在你写代码的时候自动标出语法错误和格式问题，做作业的时候能少很多低级错误。

还有一个我强烈建议装的浏览器插件：Vue Devtools。它能直接看到组件树、路由状态、Pinia的Store数据，对调试大作业来说几乎是神器。装好之后，你的Vue组件在调试面板里就会多出一个“Vue”标签页。后面调试“数据为什么没更新”“路由跳转为什么失败”之类的问题全靠它。

2.2 脚手架创建项目：两条路线选一条

这一步我见过太多人卡住，其实两条命令就能搞定。Vue 3推荐用Vite方式：

npm create vue@latest

这个命令会引导你填写项目名，并询问是否安装Vue Router、Pinia、ESLint等。按需勾选就行，我建议这个阶段全部选Yes，后面不用手动一个个装。

如果是Vue 2，用Vue CLI：

npm install -g @vue/cli vue create project-name

选默认配置的Vue 2即可。

提示：如果你在Vite创建过程中看到“The project can not found node_modules”的提示，不用慌，这只是说明依赖还没装好。项目生成后先执行一次npm install，然后再执行npm run dev。

创建完后，项目目录看起来是这样的（以Vite创建Vue 3项目为例）：

src/ assets/ # 静态资源，图片、公共样式 components/ # 通用组件，比如分页、搜索栏 views/ # 页面级组件，一个路由对应一个文件 router/ # 路由配置文件 stores/ # Pinia状态管理 api/ # 接口请求统一封装 utils/ # 工具函数，比如防抖、时间格式化 App.vue # 根组件 main.js # 入口文件

这个目录结构看起来很简单，但它传递了一个信号：你对项目的组织是有思考的。很多同学把所有页面全部堆在components里，组件和页面混在一起，代码一多就乱。页面放views，可复用部分放components，接口请求单独放api，这是Vue项目最基础的分层规范。

2.3 依赖清单：这些包值得装

把常用的依赖整理成一张表，按需安装，注意我这边的说明，避免装了没用或装错版本：

这里面有几个点要注意：

Element Plus装完之后需要全局引入，在main.js里加上这段：

import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' app.use(ElementPlus)

如果你不想把所有组件都打包进去，可以按需引入，但为了期末作业，全局引入完全够用，代码还少。

ECharts在Vue 3里推荐用vue-echarts这个封装组件，可以少写很多init、setOption的重复代码。当然，直接在每个组件里import * as echarts from 'echarts'然后手动初始化也行，只是代码稍微多了点。

2.4 本地开发和启动：跑通第一个Hello World

依赖装完之后，在项目根目录执行：

npm run dev

看到终端输出Local: http://localhost:5173/这样的地址，浏览器打开就能看到默认的Vue启动页。到这里，你的项目骨架就跑起来了。

我再多说一句，这一步是很多人的“劝退点”。我见过太多人在这一步卡住，报错信息五花八门。我的建议是：遇到报错不要慌，先看最下面一行报错信息，不要看前面一长串看似吓人的红字。80%的情况是端口被占用、Node版本不兼容、依赖没装全这三类问题。端口被占用就改端口，依赖没装全就执行npm install，版本不兼容就升级或者降级Node。

跑通第一个页面只是开始，真正让你拉开差距的是后面那些核心功能的实现。

3. 核心功能实现：拿到满分的几个关键点

3.1 登录注册与权限控制：让系统有“门禁”

登录注册是几乎所有后台管理系统的标配，也是展示你“前端工程能力”的重中之重。我见过很遗憾的做法：做一个假登录，输入任意用户名密码就跳到首页，没有任何校验。这是及格线以下的操作，千万不要学。

一个拿得出手的登录模块至少要包含这几层：

第一层是表单校验。用户名不能为空、密码长度至少6位、二次确认密码要一致。Element Plus里表单校验非常方便，直接在rules里配置规则就行，注意自定义校验器是写在校验函数里，支持正则匹配邮箱和手机号。

第二层是登录成功后把token存起来。真实项目中token是从后端接口返回的，期末大作业如果没有后端，可以用mockjs模拟，或者最简单的方式——在本地写死一个假接口，返回一个固定字符串。存储位置建议用localStorage，刷新页面后登录状态依然保留。

第三层是axios拦截器统一携带token。在src/api/request.js里封axios实例，通过请求拦截器把token附加到请求头，这样每个接口都不用手动写token参数。

import axios from 'axios' const request = axios.create({ baseURL: '/api', timeout: 10000 }) // 请求拦截器：自动附带token request.interceptors.request.use(config => { const token = localStorage.getItem('token') if (token) { config.headers.Authorization = `Bearer ${token}` } return config }) // 响应拦截器：统一处理错误 request.interceptors.response.use( res => res.data, err => { if (err.response && err.response.status === 401) { localStorage.removeItem('token') window.location.href = '/login' } return Promise.reject(err) } )

这段代码看起来不长，但包含了一个非常核心的思想：你把跨页面的通用逻辑抽到拦截器里，而不是在每个页面里写重复的判断。这属于“代码可维护性”层面的东西，老师看代码时会非常加分。

第四层是路由守卫。在router/index.js里配置：

router.beforeEach((to, from, next) => { const token = localStorage.getItem('token') const whiteList = ['/login', '/register', '/404'] if (token) { // 已登录，访问登录页则重定向到首页 if (whiteList.includes(to.path)) { next('/') } else { next() } } else { // 未登录，只能访问白名单页面 if (whiteList.includes(to.path)) { next() } else { next('/login') } } })

路由守卫解决的是“用户没登录，直接敲URL访问后台页面怎么办”这个问题。没有这层校验，系统等于没有门禁。有了这个，整个系统的安全感和完整度瞬间就不一样了。

注意：如果你的项目有“管理员”角色，还需要在登录时把角色信息存到localStorage或者Pinia里，然后通过“动态路由”来控制某个路由只有指定角色能访问。动态路由的核心是router.addRoute()，逻辑大致是：登录后根据角色权限获取可访问的路由表，逐个动态注册，而不是一次性全部注册。这个功能稍微复杂，但在答辩时是重量级亮点。

3.2 路由设计：嵌套布局和参数传递

路由这块，新手最容易犯的错误是把所有路由全部平铺。比如：

routes: [ { path: '/login', ... }, { path: '/admin/user', ... }, { path: '/admin/goods', ... }, { path: '/admin/statistics', ... } ]

这样当然能跑，但结构很不清晰。更合理的做法是用嵌套路由，把后台框架和业务页面拆开。一个典型的管理后台路由结构是这样的：

routes: [ { path: '/login', component: Login }, { path: '/admin', component: AdminLayout, // 后台总体布局，包含侧边栏、顶栏、内容区 children: [ { path: 'dashboard', component: Dashboard }, { path: 'users', component: UserList }, { path: 'orders', component: OrderList } ] } ]

这样设计的好处是：AdminLayout只需要写一次，侧边栏导航只维护一份；每个业务页面只关心自己内容区的那部分组件，代码清晰很多。

路由传参是另一个容易搞混的地方。Vue Router里有两种方式：

• query传参：router.push({ path: '/detail', query: { id: 1 } })，特点是参数会显示在URL的?后面，刷新页面参数还在，适合分享链接的场景。
• params传参：router.push({ name: 'detail', params: { id: 1 } })，特点是参数不会直接暴露在URL中，但刷新页面后参数会丢失，除非你配合动态路由配置path: '/detail/:id'。

我建议期末大作业中统一用query传参，省心且容错率高。如果你要在详情页拿参数，用route.query.id取值即可。

还有一个很多人忽视但很实用的细节：路由懒加载。在配置路由的时候，把组件写成函数形式：

component: () => import('../views/Dashboard.vue')

这样初始加载时只加载首页相关的代码，访问其他页面时才动态加载对应的JS文件。项目大了以后，这个优化效果非常明显。而且，代码里出现这个写法，至少说明你了解“性能优化”这个东西。

3.3 组件通信：Props、Event、Pinia配合使用

Vue项目里最容易被过度设计或者过度混乱的，就是组件之间的通信。我见过一些同学的代码，一个页面里塞了几十个ref和props，改一个变量到处找哪里传错了，调试起来非常痛苦。我的建议是遵守一条铁律：父子组件通信用Props和自定义事件，跨层级的全局状态用Pinia，能不用EventBus就不用。

场景一：父组件给子组件传数据。比如父组件拿到用户列表，子组件用来渲染表格，就用Props。

场景二：子组件给父组件发消息。比如子组件里的“删除”按钮被点击，需要通知父组件重新加载列表，就用this.$emit('refresh')（Options API）或者const emit = defineEmits(['refresh'])（Composition API）。

场景三：两个毫无关系的组件共享状态。比如“购物车数量”在头部导航栏显示，而操作加购的页面在另一个路由下。这种情况下，把数量存在Pinia里，任何组件都能直接读取和修改。这个场景非常典型，也是使用状态管理最充分的理由。

用Pinia的步骤很简单，先安装并注册：

import { createPinia } from 'pinia' const pinia = createPinia() app.use(pinia)

然后建一个Store，比如stores/cart.js：

import { defineStore } from 'pinia' export const useCartStore = defineStore('cart', { state: () => ({ count: 0 }), actions: { add() { this.count++ } } })

任何组件里都能这样用：

const cartStore = useCartStore() cartStore.add()

对比一下Vuex的写法，Pinia明显简洁很多，这也是为什么Vue 3项目我首选Pinia。

3.4 表格、搜索、分页：列表页的“三件套”组合拳

一个合格的后台管理系统，列表页永远是最核心的页面。列表页通常由“搜索条件区 + 表格区 + 分页器”三部分组成。很多同学在写列表页的时候，把搜索、请求数据、分页、表格的状态全部塞在一个组件里，代码动辄八九百行，看着就头大。

其实这个场景完全可以用“组合式API”拆得很干净。以Vue 3的组合式函数为例，把“获取列表数据”这一整套逻辑抽成一个函数：

// useUserList.js import { ref, onMounted } from 'vue' import { getUserList } from '@/api/user' export function useUserList() { const loading = ref(false) const list = ref([]) const total = ref(0) const page = ref(1) const pageSize = ref(10) const searchForm = ref({ keyword: '', status: '' }) async function loadData() { loading.value = true try { const res = await getUserList({ page: page.value, pageSize: pageSize.value, ...searchForm.value }) list.value = res.list total.value = res.total } finally { loading.value = false } } function handleSearch() { page.value = 1 loadData() } onMounted(loadData) return { loading, list, total, page, pageSize, searchForm, loadData, handleSearch } }

提醒：这个useXxx函数就是所谓的“组合式函数（Composable）”，它不是组件，但可以复用组件的逻辑状态。写出来之后，页面组件里调用const { list, total, ... } = useUserList()就可以了。如果老师上课没讲过这个思路，你在答辩时拿出来讲，绝对能让他眼前一亮。

分页组件用el-pagination，和表格配合非常简单。注意把current-page和page-size绑定到刚才的组合式函数返回的状态上，翻页时调用loadData重新请求。

搜索这块我多说一句：如果搜索条件是输入框类型，一定要加“点击搜索或回车才发起请求”的逻辑，而不是输入一个字符就请求一次接口。给输入框绑定@keyup.enter，或者用一个300毫秒的防抖函数控制请求频率。防抖的写法在Vue 3里只有几行：

function debounce(fn, delay = 300) { let timer = null return function(...args) { if (timer) clearTimeout(timer) timer = setTimeout(() => fn.apply(this, args), delay) } }

有了防抖，用户体验和接口压力都能兼顾，这里属于体现“工程思维”的细节，体现出来很加分。

3.5 数据可视化：3张图表撑起整页面的“高级感”

现在任何一个管理系统，只要首页放了三张动态图表，给人的第一印象立刻不一样。实现方式非常成熟，我以ECharts为例。

先安装ECharts，然后在需要图表的页面里引入：

import * as echarts from 'echarts'

在模板里放一个容器：

<div ref="chartRef" style="height: 400px;"></div>

在onMounted里初始化图表：

const chartRef = ref(null) let chart = null onMounted(() => { chart = echarts.init(chartRef.value) chart.setOption({ xAxis: { type: 'category', data: ['一月', '二月', '三月'] }, yAxis: { type: 'value' }, series: [ { name: '销量', type: 'line', data: [120, 200, 150] } ] }) })

三张图表的推荐组合：首页仪表盘用一套折线图展示近7天数据趋势，列表页用一套柱状图做分类统计，详情页用一套饼图做占比分析。这基本上就能撑起一个项目的数据可视化需求。

有一点必须提醒你：图表数据建议从接口动态获取，不要写死。哪怕是期末大作业，你可以在本地mock一份JSON数据，然后用请求去拿，让图表在加载时有一个“请求数据 → 渲染图表”的过程。答辩时老师问“数据从哪来的”，你可以理直气壮地说“通过封装好的axios接口请求动态渲染”。如果数据写死，这一问就凉了一半。

另一个常见问题是：窗口缩放后图表变形。解决办法是加一个窗口事件监听：

window.addEventListener('resize', () => { chart && chart.resize() })

注意在组件销毁时移除监听，否则会有内存泄漏的隐患。

3.6 加分小技巧：组件封装和通用模块抽离

如果你前面的功能都实现了，再做一个通用组件封装，整个项目的完成度会再上一个台阶。

最简单的做法是封装一个“通用卡片统计组件”。你在首页仪表盘上有好几个统计卡片，比如“用户总数”“今日订单数”“待处理事项”。每个卡片结构完全一样，只有标题和数值不同。浪费6个页面这样写，就是明显的重复代码。封装的思路是：

<template> <div class="stat-card"> <div class="stat-title">{{ title }}</div> <div class="stat-value">{{ value }}</div> </div> </template> <script setup> defineProps({ title: String, value: [String, Number] }) </script>

然后在页面里这样用：

<StatCard title="用户总数" :value="userTotal" /> <StatCard title="今日订单" :value="orderTotal" />

代码量立刻少了很多。这个“封装”的动作，核心体现的是你“识别重复、抽离公共”的能力，这在任何工作场景都是一项基本功。

4. 踩坑实录：六个高频问题的排查与解决

下面这些问题都是我实测下来学生问得最多的“拦路虎”，我按出现频率排序来写，也包含了各位的真实痛点场景，重点说清楚“为什么会出现+怎么解决”。

4.1 “the project can not found node_modules”怎么回事

这个提示出现在Vue CLI创建项目过程中，大意是项目目录下找不到node_modules。原因是脚手架创建项目时还没执行依赖安装，或者依赖安装失败。解决方法一句话：在项目根目录执行npm install。如果安装超时或者报错，把node_modules文件夹和package-lock.json删除后再执行一次，或者改用淘宝镜像源安装：

npm config set registry https://registry.npmmirror.com

4.2 “vue is not defined”是最常见的低级错误

这个报错绝大多数情况是在某个JS文件里直接用了Vue构造函数，但没做import引入，比如在main.js里写了new Vue()却没import Vue from 'vue'。Vue 3里更常见的是没有正确挂载：

// 错误写法 new Vue({ render: h => h(App) }).$mount('#app') // Vue 3正确写法 import { createApp } from 'vue' createApp(App).mount('#app')

排查顺序：先看报错文件的开头有没有正确import，再看创建应用的方式是否跟Vue版本匹配。如果你用了CDN插件但没有在HTML里引入，也会出现“Vue is not defined”。

4.3 keep-alive切换路由后el-table滚动位置没回到顶部

场景：我在做一个订单列表页，列表很长，我滚到第50条，切到别的页面再切回来，发现表格还停留在原来的滚动位置，而且数据还是旧的。这个现象很典型，是因为Vue Router开启了keep-alive，组件被缓存了，离开页面时滚动位置也被保留下来。

解决办法是监听路由切换的钩子，在离开页面前滚动容器到顶部：

onBeforeRouteLeave(() => { tableRef.value?.scrollTop = 0 })

或者用activated钩子，在组件被重新激活时处理。这个问题的本质是“组件缓存和用户预期不一致”，好在解法很简单。这也提醒你：keep-alive虽然好用，但要清楚它带来的副作用，答辩的时候如果被问到“keep-alive有什么坑”，你可以用这个例子回答。

4.4 跨域问题：接口请求一直报CORS错误

期末大作业如果只用mock数据，不存在跨域。但很多同学会尝试对接真实后端接口或者JSON Server，这时候跨域就来了。Vite的解决方式是在vite.config.js里配置代理：

export default defineConfig({ server: { proxy: { '/api': { target: 'http://localhost:3000', changeOrigin: true } } } })

关键是changeOrigin: true，这样请求/api/user就会被转发到http://localhost:3000/api/user。注意代理只在开发环境生效，部署到线上时需要后端同学支持CORS或者配置反向代理。

4.5 打包后页面白屏，资源路径不对

npm run build构建完了，dist文件打开却是白屏。这个问题十有八九是静态资源的路径问题。默认情况下，Vite把资源路径配成了绝对路径/assets/...，但你如果用文件协议直接打开dist/index.html，绝对路径就找不到文件了。

解决办法是修改vite.config.js：

export default defineConfig({ base: './', // 改成相对路径 })

这个问题常见到什么程度呢？有同学半年后参加工作，第一个前端任务就遇到了同样的问题。提前在这里解决，后面的路会顺畅很多。

4.6 “npm run dev报错”的通用排查顺序

我把一套通用排查顺序写在这里，以后遇到任何启动报错都按这个顺序操作：

1. 看终端最底部的报错信息，把关键词复制去搜索引擎（不要复制整段几百行）。
2. 确认Node版本是否符合项目要求（node -v）。
3. 删掉node_modules和package-lock.json，重新npm install。
4. 检查端口是否被占用（报错里有“port”关键词时重点排查）。
5. 如果是新拉下来的项目，检查是否会缺.env环境配置文件。

这套流程能解决90%以上的启动问题，剩下的10%基本是操作系统环境或依赖版本冲突，去网上搜具体的报错关键词都能找到答案。

5. 答辩演示：学会把12分钟讲成加分项

5.1 演示动线：先讲完爆点再讲结构

很多同学的答辩流程是：打开项目跑起来 → 从登录开始逐个页面点一遍 → 老师问“还有什么亮点吗” → 答不上来。这个顺序非常吃亏，因为你的演示是“平铺直叙”的，老师听到后面已经没有耐心了。

我建议的答辩动线是：先讲结论和亮点，再演示细节。

开场第一句话就说清楚：“我这次做的题目是XXX，核心功能模块有三个，比较有特色的地方是登录鉴权、数据可视化和文件导出，下面我按场景演示一遍。”把亮点提前抛出来，让老师带着期待看你演示，而不是陪着你按部就班点页面。

5.2 演示前准备好一张功能脑图或项目结构图

答辩现场给老师看一张“项目架构图”，效果远胜于一上来就敲代码。可以用思维导图工具把项目的技术栈、目录结构、功能模块梳理成一张图。不用画得非常精致，手画也行，但一定要把“分层”体现出来。老师看到你对自己的项目能有一个“全局把握”，心里对你的评价会高很多。

5.3 常见答辩问题提前写答案

下面是我总结的答辩现场几乎必问的几个问题，提前把答案写在笔记里，背熟：

• “你项目里用到的Vue生态有哪些？”（答：Vue Router、Pinia、Element Plus、Axios、ECharts，再展开说每一个负责什么。）
• “路由守卫是怎么工作的？”（答：白名单+登录状态判断，未登录跳登录页，已登录访问登录页跳首页。）
• “项目里最难解决的问题是什么？”（答：某个具体问题，比如keep-alive的列表位置恢复、跨域代理配置。切记不要回答“没有难点”，这个问题考察的是你发现问题、分析问题、解决问题的能力。）
• “数据可视化里的数据是怎么来的？”（答：接口动态请求，mock数据或者JSON Server。然后演示一下图表在数据变化后怎么更新。）

5.4 README和提交内容清单

答辩前检查一下你的项目根目录有没有README.md。这个文件虽然不参与功能，但在老师眼里是“专业程度”的重要标志。建议包含：

• 项目简介和功能模块列表
• 环境要求（Node版本、npm版本）
• 启动方式（npm install、npm run dev）
• 演示账号密码（如果有登录）

提交内容整体按这个清单检查：项目源码（去掉node_modules）+ README.md + 演示录屏（可选）+ 设计说明文档（如果老师要求）。不要提交一堆乱七八糟的压缩包，提交干净、结构清晰，本身就是“职业素养”的体现。

我个人在实际操作中的体会是：Vue期末大作业其实是你整个学期里最接近“真实工作”的一次实践机会。你不能只把它当成一次应付老师、拿学分的任务，应该把它当成一个可以向别人展示的作品。按照“选题有场景、功能有闭环、代码有分层、答辩有亮点”这条主线走下来，即使最后没有拿到满分，你收获的也远远不只是分数——你会真正理解一个Vue项目是怎么从零到一搭起来的，那种“我能独立做项目”的踏实感，比任何分数都值得。

最后再分享一个小技巧：做完项目之后，把整个开发过程中遇到的报错记录到一个文档里，写清楚“报错信息+原因+解决办法”。别看这个动作小，等你写完这份文档，你会发现自己对这个项目每个细节的记忆都清晰了很多，去面试的时候这也可以作为你的项目复盘素材。祝各位都能拿下这门课的高分。

本文还有配套的精品资源，点击获取