Vue3全家桶实战：从零搭建一个后台管理系统（含Router+Axios完整配置）

Vue3全家桶实战从零构建企业级后台管理系统1. 项目架构设计与环境搭建在开始构建后台管理系统前我们需要规划合理的项目结构。现代前端工程通常采用模块化设计以下是我的推荐目录结构/src ├── api # 接口封装层 ├── assets # 静态资源 ├── components # 公共组件 ├── composables # 组合式函数 ├── router # 路由配置 ├── stores # 状态管理 ├── styles # 全局样式 ├── utils # 工具函数 └── views # 页面组件1.1 初始化Vue3项目使用Vite可以快速创建现代化的Vue3项目npm create vitelatest admin-system --template vue-ts cd admin-system npm install关键依赖安装npm install vue-router4 pinia axios sass1.2 配置基础路由在router/index.ts中配置基本路由结构import { createRouter, createWebHistory } from vue-router const router createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes: [ { path: /login, component: () import(/views/Login.vue), meta: { requiresAuth: false } }, { path: /, component: () import(/layouts/MainLayout.vue), children: [ { path: /dashboard, component: () import(/views/Dashboard.vue), meta: { title: 控制台, icon: dashboard } } ] } ] }) export default router2. 核心功能模块实现2.1 智能路由权限系统后台管理系统的路由权限通常需要动态生成我们可以通过路由守卫实现router.beforeEach(async (to) { const authStore useAuthStore() // 需要登录但未登录 if (to.meta.requiresAuth ! false !authStore.token) { return /login?redirect encodeURIComponent(to.fullPath) } // 已登录但访问登录页 if (to.path /login authStore.token) { return /dashboard } // 动态添加路由 if (authStore.userInfo?.permissions !authStore.routesAdded) { authStore.permissions.forEach(permission { router.addRoute(main, { path: permission.path, component: () import(/views/${permission.component}.vue), meta: permission.meta }) }) authStore.setRoutesAdded(true) return to.fullPath } })2.2 高效API服务封装在api/request.ts中创建axios实例import axios from axios const service axios.create({ baseURL: import.meta.env.VITE_API_BASE_URL, timeout: 10000 }) // 请求拦截 service.interceptors.request.use(config { const authStore useAuthStore() if (authStore.token) { config.headers.Authorization Bearer ${authStore.token} } return config }) // 响应拦截 service.interceptors.response.use( response { if (response.data.code ! 200) { return Promise.reject(response.data) } return response.data }, error { if (error.response?.status 401) { // 处理token过期 } return Promise.reject(error) } ) export default service2.3 模块化状态管理使用Pinia创建用户认证store// stores/auth.ts import { defineStore } from pinia export const useAuthStore defineStore(auth, { state: () ({ token: localStorage.getItem(token) || , userInfo: null as UserInfo | null, permissions: [] as Permission[], routesAdded: false }), actions: { async login(credentials: LoginForm) { const { data } await api.login(credentials) this.token data.token this.userInfo data.user localStorage.setItem(token, data.token) }, async fetchPermissions() { const { data } await api.getPermissions() this.permissions data } } })3. 高级功能实现技巧3.1 动态菜单生成基于权限数据自动生成侧边栏菜单template el-menu :default-active$route.path router template v-forroute in permittedRoutes :keyroute.path el-sub-menu v-ifroute.children :indexroute.path template #title el-iconcomponent :isroute.meta.icon //el-icon span{{ route.meta.title }}/span /template el-menu-item v-forchild in route.children :keychild.path :indexchild.path {{ child.meta.title }} /el-menu-item /el-sub-menu el-menu-item v-else :indexroute.path el-iconcomponent :isroute.meta.icon //el-icon span{{ route.meta.title }}/span /el-menu-item /template /el-menu /template script setup import { computed } from vue import { useRouter } from vue-router const router useRouter() const permittedRoutes computed(() router.options.routes.filter(route route.meta?.requiresAuth ! false ) ) /script3.2 表格数据渲染优化使用组合式API封装可复用的表格逻辑// composables/useTable.ts import { ref, onMounted } from vue export function useTable(apiFn: Function) { const loading ref(false) const data ref([]) const pagination reactive({ page: 1, pageSize: 10, total: 0 }) const fetchData async () { try { loading.value true const res await apiFn({ page: pagination.page, pageSize: pagination.pageSize }) data.value res.list pagination.total res.total } finally { loading.value false } } onMounted(fetchData) return { loading, data, pagination, fetchData } }4. 性能优化与工程化4.1 路由懒加载优化通过webpack魔法注释实现更好的代码分割const routes [ { path: /user, component: () import(/* webpackChunkName: user */ /views/User.vue) } ]4.2 构建配置优化在vite.config.ts中添加以下配置export default defineConfig({ build: { chunkSizeWarningLimit: 1500, rollupOptions: { output: { manualChunks(id) { if (id.includes(node_modules)) { return id.toString().split(node_modules/)[1].split(/)[0] } } } } } })4.3 自动化部署方案推荐使用GitHub Actions实现CI/CD# .github/workflows/deploy.yml name: Deploy on: push: branches: [main] jobs: deploy: runs-on: ubuntu-latest steps: - uses: actions/checkoutv2 - uses: actions/setup-nodev2 with: node-version: 16 - run: npm install - run: npm run build - uses: peaceiris/actions-gh-pagesv3 with: github_token: ${{ secrets.GITHUB_TOKEN }} publish_dir: ./dist