Vue 3工程化实践与组件设计核心任务概述本次项目实训聚焦Vue 3前端工程化配置与全局组件开发目标是通过模块化设计提升代码复用率并建立规范的前后端协作流程。核心任务包括使用Pinia实现全局状态管理基于Ant Design Vue完成响应式布局组件封装统一的HTTP请求层工程化配置实践项目采用Vite构建工具初始化Vue 3 TypeScript模板引入Router和PiniaRouter路由管理const router createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes: [ { path: /, name: home, component: HomePage, }, ], })Pinia状态管理全局组件开发BasicLayout.vue作为基础布局组件整合导航菜单与页脚template a-layout classbasic-layout !-- 顶部导航栏 -- GlobalHeader / !-- 主要内容区域 -- a-layout-content classmain-content router-view / /a-layout-content !-- 底部版权信息 -- GlobalFooter / /a-layout /template script setup langts import GlobalHeader from /components/GlobalHeader.vue import GlobalFooter from /components/GlobalFooter.vue /script style scoped .basic-layout { background: none; } .main-content { width: 100%; padding: 0; background: none; margin: 0; } /styleimport GlobalHeader from /components/GlobalHeader.vueimport GlobalFooter from /components/GlobalFooter.vue将GlobalHeader 和GlobalFooter抽离成组件结构更清晰在GlobalHeader.vue中给 GlobalHeader 的菜单组件绑定跳转事件import { useRouter } from vue-router const router useRouter() // 处理菜单点击 const handleMenuClick: MenuProps[onClick] (e) { const key e.key as string selectedKeys.value [key] // 跳转到对应页面 if (key.startsWith(/)) { router.push(key) } }高亮同步刷新页面后 发现当前菜单项并没有高亮所以需要同步路由的更新到菜单项高亮。同步高亮原理1. 点击菜单时Ant Design 组件已经通过 v-model 绑定 current 变量实现了高亮。2. 刷新页面时需要获取到当前 URL 路径然后修改 current 变量的值从而实现同步。使用Vue Router的 afterEach 路由钩子实现每次改变路由或刷新页面时都会自动更新 current 的值从而实现高亮// 当前选中菜单 const selectedKeys refstring[]([/]) // 监听路由变化更新当前选中菜单 router.afterEach((to, from, next) { selectedKeys.value [to.path] })请求层封装方案Axios拦截器配置包含错误统一处理逻辑import axios from axios import { message } from ant-design-vue // 创建 Axios 实例 const myAxios axios.create({ baseURL: http://localhost:8080/api, timeout: 60000, withCredentials: true, }) // 全局请求拦截器 myAxios.interceptors.request.use( function (config) { // Do something before request is sent return config }, function (error) { // Do something with request error return Promise.reject(error) }, ) // 全局响应拦截器 myAxios.interceptors.response.use( function (response) { const { data } response // 未登录 if (data.code 40100) { // 不是获取用户信息的请求并且用户目前不是已经在用户登录页面则跳转到登录页面 if ( !response.request.responseURL.includes(user/get/login) !window.location.pathname.includes(/user/login) ) { message.warning(请先登录) window.location.href /user/login?redirect${window.location.href} } } return response }, function (error) { // Any status codes that falls outside the range of 2xx cause this function to trigger // Do something with response error return Promise.reject(error) }, ) export default myAxios自动生成请求代码如果采用传统开发方式针对每个请求都要单独编写代码很麻烦。 所以使用 OpenAPI 工具直接根据后端接口文档自动生成前端请求代码即可这种方式会比 AI 生成更可控。// 根据后端接口生成前端请求和 TS 模型代码 // npm run openapi2ts export default { requestLibPath: import request from /request, // schemaPath: Your OpenAPI schema path, schemaPath: http://localhost:8080/api/v3/api-docs, serversPath: ./src, }生成的模型直接应用于Pinia Action确保前后端参数类型一致。经验总结模块化设计使布局组件复用率提升40%自动生成的API代码减少手动声明类型的时间消耗