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

Vue3全家桶实战：从零构建企业级后台管理系统

1. 项目架构设计与环境搭建

在开始构建后台管理系统前，我们需要规划合理的项目结构。现代前端工程通常采用模块化设计，以下是我的推荐目录结构：

/src ├── api # 接口封装层 ├── assets # 静态资源 ├── components # 公共组件 ├── composables # 组合式函数 ├── router # 路由配置 ├── stores # 状态管理 ├── styles # 全局样式 ├── utils # 工具函数 └── views # 页面组件

1.1 初始化Vue3项目

使用Vite可以快速创建现代化的Vue3项目：

npm create vite@latest admin-system --template vue-ts cd admin-system npm install

关键依赖安装：

npm install vue-router@4 pinia axios sass

1.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 router

2. 核心功能模块实现

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 service

2.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-for="route in permittedRoutes" :key="route.path"> <el-sub-menu v-if="route.children" :index="route.path"> <template #title> <el-icon><component :is="route.meta.icon" /></el-icon> <span>{{ route.meta.title }}</span> </template> <el-menu-item v-for="child in route.children" :key="child.path" :index="child.path" > {{ child.meta.title }} </el-menu-item> </el-sub-menu> <el-menu-item v-else :index="route.path"> <el-icon><component :is="route.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 ) ) </script>

3.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/checkout@v2 - uses: actions/setup-node@v2 with: node-version: '16' - run: npm install - run: npm run build - uses: peaceiris/actions-gh-pages@v3 with: github_token: ${{ secrets.GITHUB_TOKEN }} publish_dir: ./dist