作为一名大三前端学习者在开发 Vue3 实战项目的过程中近段时间我重点深耕了 Vue3 框架核心能力——路由、状态管理、接口封装这些都是企业级项目必备的技能也是实习面试的高频考点。本文整合这段时间的学习与实战经验结合通用 Vue3 项目场景分享最实用的 Vue3 知识点拒绝空谈理论全是能直接落地的实战内容适合前端新手参考学习。一、Vue Router4 实战路由守卫与懒加载项目的“导航核心”在 Vue3 项目中路由是页面跳转的核心既要控制登录权限也要优化首屏加载速度这就用到了路由守卫和懒加载两个关键功能适用于各类中后台、展示类项目。1. 核心知识点路由懒加载将路由组件按需加载减小首屏打包体积提升加载速度路由守卫控制路由跳转权限实现登录拦截、页面访问限制最常用全局前置守卫路由传参params、query 两种方式适配不同场景如传递详情ID、查询条件。2. 项目实战代码1路由懒加载配置必用之前直接导入所有路由组件首屏加载很慢改用懒加载后首屏加载速度提升了40%通用项目代码如下dex.js import { createRouter, createWebHistory } from vue-router; // 路由懒加载访问对应路由时才加载组件 const Login () import(/views/Login.vue); const Home () import(/views/Home.vue); const ListPage () import(/views/ListPage.vue); // 列表页 const DetailPage () import(/views/DetailPage.vue); // 详情页 const routes [ { path: /, redirect: /home }, { path: /login, component: Login }, { path: /home, component: Home }, { path: /list, component: ListPage }, { path: /detail/:id, component: DetailPage } // 动态路由传参 ]; const router createRouter({ history: createWebHistory(), routes }); export default router;2全局前置守卫登录拦截通用项目要求未登录用户不能访问首页、列表等核心页面必须跳转至登录页代码如下// router/index.js router.beforeEach((to, from, next) { // 从localStorage获取token判断是否登录 const token localStorage.getItem(token); // 白名单不需要登录就能访问的页面只有登录页 const whiteList [/login]; if (whiteList.includes(to.path)) { next(); // 放行 } else { // 已登录放行未登录跳登录页 token ? next() : next(/login); } });3. 项目实战场景与面试点实战场景访问详情页时通过动态路由传递数据ID在详情页接收并请求对应数据登录后跳转至首页未登录拦截所有核心页面适用于各类需要权限控制的项目。面试高频问法① 路由懒加载的实现方式和好处② 如何实现Vue路由的登录拦截③ 动态路由传参和query传参的区别面试答案懒加载用import动态导入好处是减小首屏体积、提升加载速度登录拦截用全局前置守卫判断token是否存在动态路由传参params参数在URL路径中query传参在URL查询字符串中前者刷新页面参数不丢失需配置路由后者会丢失。二、Pinia 实战Vue3 状态管理的最优解在 Vue3 项目中用户信息、全局主题、加载状态等需要在多个组件间共享的数据用Pinia管理最简洁高效。之前尝试过Vuex对比后发现Pinia更轻量、更适合Vue3也更符合面试趋势适用于各类需要全局状态共享的项目。1. 核心知识点Pinia 核心defineStore定义仓库、state状态、actions同步/异步操作、getters计算属性优势无mutations简化代码、天生支持TS、体积小约1KB、模块化无需额外配置与Vuex区别Pinia去掉mutationsactions可写异步代码更简洁TS支持更好无需modules拆分模块。2. 项目实战代码1定义Pinia仓库用户信息仓库// store/userStore.js import { defineStore } from pinia; // 定义仓库第一个参数是仓库唯一标识第二个参数是配置 export const useUserStore defineStore(user, { state: () ({ token: localStorage.getItem(token) || , // 用户token username: localStorage.getItem(username) || , // 用户名 role: localStorage.getItem(role) || user // 用户角色 }), actions: { // 同步设置用户信息 setUserInfo(userInfo) { this.token userInfo.token; this.username userInfo.username; this.role userInfo.role; // 持久化存储到localStorage防止页面刷新丢失 localStorage.setItem(token, userInfo.token); localStorage.setItem(username, userInfo.username); localStorage.setItem(role, userInfo.role); }, // 异步退出登录清除状态 async logout() { // 调用退出登录接口 await $axios.post(/api/user/logout); // 清除仓库状态 this.token ; this.username ; this.role user; // 清除localStorage localStorage.removeItem(token); localStorage.removeItem(username); localStorage.removeItem(role); } }, getters: { // 计算属性判断是否为管理员 isAdmin() { return this.role admin; } } });2组件中使用Piniatemplate div classuser-info span{{ username }}/span button clickhandleLogout v-ifisAdmin退出登录/button /div /template script setup import { useUserStore } from /store/userStore; import { useRouter } from vue-router; // 获取仓库实例 const userStore useUserStore(); const router useRouter(); // 解构仓库状态和方法可直接使用 const { username, isAdmin, logout } userStore; // 退出登录 const handleLogout () { logout(); router.push(/login); }; /script3. 项目实战场景与面试点实战场景登录后存储用户信息在导航栏显示用户名管理员角色可查看更多操作按钮退出登录时清除状态并跳转登录页适用于各类有用户权限管理的项目。面试高频问法① Pinia和Vuex的区别② Pinia的actions为什么能写异步③ 如何实现Pinia状态持久化面试答案Pinia无mutations、支持TS、体积小Vuex有mutations、TS支持差、需modulesPinia的actions无需像Vuex那样区分同步异步可直接写async/await状态持久化可结合localStorage手动存储或pinia-plugin-persistedstate插件。三、Vue3 工程化axios封装 跨域解决项目的“接口核心”Vue3 项目中通常需要大量接口请求登录、获取列表数据、上传文件、提交表单等直接使用axios会导致代码冗余跨域问题也会影响开发效率因此封装axios和配置跨域是工程化的关键一步适用于所有需要接口联调的Vue3项目。1. 核心知识点axios封装统一配置baseURL、请求超时时间通过请求/响应拦截器统一处理token、错误提示跨域解决开发环境用Vite配置proxy代理生产环境由后端配置CORS拦截器作用请求拦截器添加token、统一请求头响应拦截器统一处理错误、解析数据。2. 项目实战代码1axios封装// api/request.js import axios from axios; import { ElMessage } from element-plus; import router from /router; // 创建axios实例 const service axios.create({ baseURL: import.meta.env.VITE_API_BASE_URL, // 环境变量区分开发/生产环境 timeout: 5000, // 超时时间 headers: { Content-Type: application/json } }); // 请求拦截器添加token service.interceptors.request.use( (config) { const token localStorage.getItem(token); if (token) { // 给所有请求添加Authorization请求头 config.headers.Authorization Bearer ${token}; } return config; }, (error) { ElMessage.error(请求发起失败请重试); return Promise.reject(error); } ); // 响应拦截器统一处理错误、解析数据 service.interceptors.response.use( (response) { // 只返回响应体中的data部分简化使用 return response.data; }, (error) { // 统一错误提示 const msg error.response?.data?.msg || 请求失败请稍后重试; ElMessage.error(msg); // 401未授权token过期或未登录跳登录页并清除状态 if (error.response?.status 401) { localStorage.removeItem(token); router.push(/login); } return Promise.reject(error); } ); export default service;2接口统一管理将所有接口集中管理便于维护通用项目代码如下// api/list.js列表相关接口 import service from ./request; // 获取列表数据 export const getListData (params) { return service({ method: GET, url: /api/list, params // 分页、查询条件等参数 }); }; // 上传文件 export const uploadFile (data) { return service({ method: POST, url: /api/upload, data, headers: { Content-Type: multipart/form-data // 文件上传需设置 } }); }; // 组件中使用接口 import { getListData } from /api/list; const getList async () { const res await getListData({ page: 1, size: 10 }); tableData.value res.list; };3Vite配置跨域代理开发环境// vite.config.js import { defineConfig } from vite; import vue from vitejs/plugin-vue; import path from path; export default defineConfig({ plugins: [vue()], resolve: { alias: { : path.resolve(__dirname, ./src) // 路径别名指向src } }, // 跨域代理配置 server: { proxy: { /api: { target: http://localhost:3000, // 后端接口地址 changeOrigin: true, // 开启跨域 rewrite: (path) path.replace(/^\/api/, ) // 去掉/api前缀 } } } });3. 项目实战场景与面试点实战场景所有接口请求统一使用封装后的axios无需重复配置baseURL和token开发环境通过代理解决跨域顺利联调后端接口文件上传、接口错误统一处理提升开发效率适用于各类需要接口联调的Vue3项目。面试高频问法① 为什么要封装axios② Vue项目中遇到跨域怎么解决③ axios拦截器的作用是什么面试答案封装axios可以统一配置、减少重复代码、统一处理错误和token跨域开发环境用proxy代理生产环境后端配置CORS请求拦截器添加token和请求头响应拦截器统一处理错误、解析数据避免每个请求都写重复逻辑。四、Vue3 项目梳理从功能到面试亮点这5天的学习核心是将Vue3的路由、状态管理、工程化能力落地到实战项目中同时我也重新梳理了自己的Vue3项目为后续实习面试做准备整理了通用项目的核心亮点和难点解决方案供大家参考。1. 项目核心信息面试必背项目名称Vue3 中后台实战项目技术栈Vue3 Vite Pinia Element Plus axios ECharts核心功能用户登录、列表展示、详情查看、文件上传、数据查询、数据统计2. 项目难点与解决方案面试核心素材难点1跨域问题 → 解决方案Vite配置proxy代理生产环境后端配置CORS难点2用户状态共享 → 解决方案用Pinia管理全局状态结合localStorage实现持久化难点3接口请求冗余、错误处理繁琐 → 解决方案封装axios使用请求/响应拦截器统一处理难点4首屏加载慢 → 解决方案路由懒加载减小首屏打包体积。3. 面试可突出的亮点工程化思维封装axios、统一接口管理规范项目结构提升代码可维护性问题解决能力遇到跨域、状态管理等问题能快速找到解决方案并落地框架熟练度熟练使用Vue3、Pinia、Vue Router等核心技术贴合企业开发需求。总结这段学习让我深刻体会到Vue3框架的核心能力最终都是为了“高效开发、规范项目、提升体验”。路由控制页面导航Pinia管理全局状态axios封装简化接口请求这些技能不仅能让项目更规范更是前端实习面试的“硬通货”。作为大三前端学习者我明白“实战是最好的老师”把这些知识点落地到自己的Vue3实战项目中不仅巩固了基础也积累了宝贵的面试素材。后续我会继续学习Vue3性能优化、TypeScript等加分项持续输出实战总结为实习面试做好充分准备也希望能帮到和我一样正在努力的前端新手。后续会持续更新Vue3性能优化、项目踩坑、前端面试题相关内容欢迎关注
Vue3 项目实战总结：路由、状态管理与工程化核心知识点
作为一名大三前端学习者在开发 Vue3 实战项目的过程中近段时间我重点深耕了 Vue3 框架核心能力——路由、状态管理、接口封装这些都是企业级项目必备的技能也是实习面试的高频考点。本文整合这段时间的学习与实战经验结合通用 Vue3 项目场景分享最实用的 Vue3 知识点拒绝空谈理论全是能直接落地的实战内容适合前端新手参考学习。一、Vue Router4 实战路由守卫与懒加载项目的“导航核心”在 Vue3 项目中路由是页面跳转的核心既要控制登录权限也要优化首屏加载速度这就用到了路由守卫和懒加载两个关键功能适用于各类中后台、展示类项目。1. 核心知识点路由懒加载将路由组件按需加载减小首屏打包体积提升加载速度路由守卫控制路由跳转权限实现登录拦截、页面访问限制最常用全局前置守卫路由传参params、query 两种方式适配不同场景如传递详情ID、查询条件。2. 项目实战代码1路由懒加载配置必用之前直接导入所有路由组件首屏加载很慢改用懒加载后首屏加载速度提升了40%通用项目代码如下dex.js import { createRouter, createWebHistory } from vue-router; // 路由懒加载访问对应路由时才加载组件 const Login () import(/views/Login.vue); const Home () import(/views/Home.vue); const ListPage () import(/views/ListPage.vue); // 列表页 const DetailPage () import(/views/DetailPage.vue); // 详情页 const routes [ { path: /, redirect: /home }, { path: /login, component: Login }, { path: /home, component: Home }, { path: /list, component: ListPage }, { path: /detail/:id, component: DetailPage } // 动态路由传参 ]; const router createRouter({ history: createWebHistory(), routes }); export default router;2全局前置守卫登录拦截通用项目要求未登录用户不能访问首页、列表等核心页面必须跳转至登录页代码如下// router/index.js router.beforeEach((to, from, next) { // 从localStorage获取token判断是否登录 const token localStorage.getItem(token); // 白名单不需要登录就能访问的页面只有登录页 const whiteList [/login]; if (whiteList.includes(to.path)) { next(); // 放行 } else { // 已登录放行未登录跳登录页 token ? next() : next(/login); } });3. 项目实战场景与面试点实战场景访问详情页时通过动态路由传递数据ID在详情页接收并请求对应数据登录后跳转至首页未登录拦截所有核心页面适用于各类需要权限控制的项目。面试高频问法① 路由懒加载的实现方式和好处② 如何实现Vue路由的登录拦截③ 动态路由传参和query传参的区别面试答案懒加载用import动态导入好处是减小首屏体积、提升加载速度登录拦截用全局前置守卫判断token是否存在动态路由传参params参数在URL路径中query传参在URL查询字符串中前者刷新页面参数不丢失需配置路由后者会丢失。二、Pinia 实战Vue3 状态管理的最优解在 Vue3 项目中用户信息、全局主题、加载状态等需要在多个组件间共享的数据用Pinia管理最简洁高效。之前尝试过Vuex对比后发现Pinia更轻量、更适合Vue3也更符合面试趋势适用于各类需要全局状态共享的项目。1. 核心知识点Pinia 核心defineStore定义仓库、state状态、actions同步/异步操作、getters计算属性优势无mutations简化代码、天生支持TS、体积小约1KB、模块化无需额外配置与Vuex区别Pinia去掉mutationsactions可写异步代码更简洁TS支持更好无需modules拆分模块。2. 项目实战代码1定义Pinia仓库用户信息仓库// store/userStore.js import { defineStore } from pinia; // 定义仓库第一个参数是仓库唯一标识第二个参数是配置 export const useUserStore defineStore(user, { state: () ({ token: localStorage.getItem(token) || , // 用户token username: localStorage.getItem(username) || , // 用户名 role: localStorage.getItem(role) || user // 用户角色 }), actions: { // 同步设置用户信息 setUserInfo(userInfo) { this.token userInfo.token; this.username userInfo.username; this.role userInfo.role; // 持久化存储到localStorage防止页面刷新丢失 localStorage.setItem(token, userInfo.token); localStorage.setItem(username, userInfo.username); localStorage.setItem(role, userInfo.role); }, // 异步退出登录清除状态 async logout() { // 调用退出登录接口 await $axios.post(/api/user/logout); // 清除仓库状态 this.token ; this.username ; this.role user; // 清除localStorage localStorage.removeItem(token); localStorage.removeItem(username); localStorage.removeItem(role); } }, getters: { // 计算属性判断是否为管理员 isAdmin() { return this.role admin; } } });2组件中使用Piniatemplate div classuser-info span{{ username }}/span button clickhandleLogout v-ifisAdmin退出登录/button /div /template script setup import { useUserStore } from /store/userStore; import { useRouter } from vue-router; // 获取仓库实例 const userStore useUserStore(); const router useRouter(); // 解构仓库状态和方法可直接使用 const { username, isAdmin, logout } userStore; // 退出登录 const handleLogout () { logout(); router.push(/login); }; /script3. 项目实战场景与面试点实战场景登录后存储用户信息在导航栏显示用户名管理员角色可查看更多操作按钮退出登录时清除状态并跳转登录页适用于各类有用户权限管理的项目。面试高频问法① Pinia和Vuex的区别② Pinia的actions为什么能写异步③ 如何实现Pinia状态持久化面试答案Pinia无mutations、支持TS、体积小Vuex有mutations、TS支持差、需modulesPinia的actions无需像Vuex那样区分同步异步可直接写async/await状态持久化可结合localStorage手动存储或pinia-plugin-persistedstate插件。三、Vue3 工程化axios封装 跨域解决项目的“接口核心”Vue3 项目中通常需要大量接口请求登录、获取列表数据、上传文件、提交表单等直接使用axios会导致代码冗余跨域问题也会影响开发效率因此封装axios和配置跨域是工程化的关键一步适用于所有需要接口联调的Vue3项目。1. 核心知识点axios封装统一配置baseURL、请求超时时间通过请求/响应拦截器统一处理token、错误提示跨域解决开发环境用Vite配置proxy代理生产环境由后端配置CORS拦截器作用请求拦截器添加token、统一请求头响应拦截器统一处理错误、解析数据。2. 项目实战代码1axios封装// api/request.js import axios from axios; import { ElMessage } from element-plus; import router from /router; // 创建axios实例 const service axios.create({ baseURL: import.meta.env.VITE_API_BASE_URL, // 环境变量区分开发/生产环境 timeout: 5000, // 超时时间 headers: { Content-Type: application/json } }); // 请求拦截器添加token service.interceptors.request.use( (config) { const token localStorage.getItem(token); if (token) { // 给所有请求添加Authorization请求头 config.headers.Authorization Bearer ${token}; } return config; }, (error) { ElMessage.error(请求发起失败请重试); return Promise.reject(error); } ); // 响应拦截器统一处理错误、解析数据 service.interceptors.response.use( (response) { // 只返回响应体中的data部分简化使用 return response.data; }, (error) { // 统一错误提示 const msg error.response?.data?.msg || 请求失败请稍后重试; ElMessage.error(msg); // 401未授权token过期或未登录跳登录页并清除状态 if (error.response?.status 401) { localStorage.removeItem(token); router.push(/login); } return Promise.reject(error); } ); export default service;2接口统一管理将所有接口集中管理便于维护通用项目代码如下// api/list.js列表相关接口 import service from ./request; // 获取列表数据 export const getListData (params) { return service({ method: GET, url: /api/list, params // 分页、查询条件等参数 }); }; // 上传文件 export const uploadFile (data) { return service({ method: POST, url: /api/upload, data, headers: { Content-Type: multipart/form-data // 文件上传需设置 } }); }; // 组件中使用接口 import { getListData } from /api/list; const getList async () { const res await getListData({ page: 1, size: 10 }); tableData.value res.list; };3Vite配置跨域代理开发环境// vite.config.js import { defineConfig } from vite; import vue from vitejs/plugin-vue; import path from path; export default defineConfig({ plugins: [vue()], resolve: { alias: { : path.resolve(__dirname, ./src) // 路径别名指向src } }, // 跨域代理配置 server: { proxy: { /api: { target: http://localhost:3000, // 后端接口地址 changeOrigin: true, // 开启跨域 rewrite: (path) path.replace(/^\/api/, ) // 去掉/api前缀 } } } });3. 项目实战场景与面试点实战场景所有接口请求统一使用封装后的axios无需重复配置baseURL和token开发环境通过代理解决跨域顺利联调后端接口文件上传、接口错误统一处理提升开发效率适用于各类需要接口联调的Vue3项目。面试高频问法① 为什么要封装axios② Vue项目中遇到跨域怎么解决③ axios拦截器的作用是什么面试答案封装axios可以统一配置、减少重复代码、统一处理错误和token跨域开发环境用proxy代理生产环境后端配置CORS请求拦截器添加token和请求头响应拦截器统一处理错误、解析数据避免每个请求都写重复逻辑。四、Vue3 项目梳理从功能到面试亮点这5天的学习核心是将Vue3的路由、状态管理、工程化能力落地到实战项目中同时我也重新梳理了自己的Vue3项目为后续实习面试做准备整理了通用项目的核心亮点和难点解决方案供大家参考。1. 项目核心信息面试必背项目名称Vue3 中后台实战项目技术栈Vue3 Vite Pinia Element Plus axios ECharts核心功能用户登录、列表展示、详情查看、文件上传、数据查询、数据统计2. 项目难点与解决方案面试核心素材难点1跨域问题 → 解决方案Vite配置proxy代理生产环境后端配置CORS难点2用户状态共享 → 解决方案用Pinia管理全局状态结合localStorage实现持久化难点3接口请求冗余、错误处理繁琐 → 解决方案封装axios使用请求/响应拦截器统一处理难点4首屏加载慢 → 解决方案路由懒加载减小首屏打包体积。3. 面试可突出的亮点工程化思维封装axios、统一接口管理规范项目结构提升代码可维护性问题解决能力遇到跨域、状态管理等问题能快速找到解决方案并落地框架熟练度熟练使用Vue3、Pinia、Vue Router等核心技术贴合企业开发需求。总结这段学习让我深刻体会到Vue3框架的核心能力最终都是为了“高效开发、规范项目、提升体验”。路由控制页面导航Pinia管理全局状态axios封装简化接口请求这些技能不仅能让项目更规范更是前端实习面试的“硬通货”。作为大三前端学习者我明白“实战是最好的老师”把这些知识点落地到自己的Vue3实战项目中不仅巩固了基础也积累了宝贵的面试素材。后续我会继续学习Vue3性能优化、TypeScript等加分项持续输出实战总结为实习面试做好充分准备也希望能帮到和我一样正在努力的前端新手。后续会持续更新Vue3性能优化、项目踩坑、前端面试题相关内容欢迎关注
