企业级后台实战（上）：从零搭建核心骨架与标准 CRUD

npm create vite@latest my-admin-app -- --template vue
cd my-admin-app
npm install
npm install vue-router pinia element-plus axios

npm install nprogress

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

router.beforeEach((to, from, next) => {
  // 路由切换开始时开启顶部进度条
  NProgress.start()
  next()
})

router.afterEach(() => {
  // 路由切换完成时关闭进度条
  NProgress.done()
})

src/
  ├── api/              # 接口请求
  ├── assets/           # 图片、字体、静态资源
  ├── components/       # 通用组件
  ├── layout/           # 整体布局
  ├── router/           # 路由配置与守卫
  ├── stores/           # Pinia 状态管理
  ├── styles/           # 全局样式
  ├── utils/            # 工具函数
  ├── views/            # 页面级组件
  ├── App.vue
  └── main.ts

<template>
  <el-container class="app-wrapper">
    <el-aside width="220px" class="sidebar-container">
      <div class="logo">My Admin</div>
      <SidebarMenu />
    </el-aside>

    <el-container>
      <el-header class="header-container">
        <Navbar />
      </el-header>

      <el-main class="main-container">
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

interface RouteMeta {
  title?: string
  icon?: string
  hidden?: boolean
  requiresAuth?: boolean
  keepAlive?: boolean
}

import Layout from '@/layout/index.vue'

export const routes = [
  {
    path: '/login',
    component: () => import('@/views/login/index.vue'),
    meta: { hidden: true }
  },
  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    meta: { requiresAuth: true },
    children: [
      {
        path: 'dashboard',
        name: 'Dashboard',
        component: () => import('@/views/dashboard/index.vue'),
        meta: {
          title: '工作台',
          icon: 'Odometer',
          keepAlive: true
        }
      },
      {
        path: 'users',
        name: 'UserList',
        component: () => import('@/views/users/index.vue'),
        meta: {
          title: '用户管理',
          icon: 'User'
        }
      }
    ]
  }
]

import { reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { login } from '@/api/user'
import { useUserStore } from '@/stores/user'

const router = useRouter()
const userStore = useUserStore()

// 登录表单数据
const form = reactive({
  username: '',
  password: ''
})

const handleLogin = async () => {
  // 1. 发送登录请求
  const res = await login(form)
  // 2. 保存 token 到全局状态
  userStore.setToken(res.token)
  ElMessage.success('登录成功')
  // 3. 登录成功后进入首页
  router.push('/')
}

router.beforeEach((to, from, next) => {
  // 每次路由跳转前都先读取本地 token
  const token = localStorage.getItem('token')

  if (to.path === '/login') {
    next()
    return
  }

  if (!token) {
    next('/login')
    return
  }

  next()
})

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

router.beforeEach((to, from, next) => {
  // 路由切换开始时开启顶部进度条
  NProgress.start()
  document.title = to.meta.title ? `${to.meta.title} - My Admin` : 'My Admin'
  next()
})

router.afterEach(() => {
  NProgress.done()
})

<template>
  <el-menu :default-active="$route.path" router>
    <template v-for="route in menuRoutes" :key="route.path">
      <el-menu-item
        v-if="route.meta?.title && !route.meta?.hidden"
        :index="`/${route.path}`"
      >
        <span>{{ route.meta.title }}</span>
      </el-menu-item>
    </template>
  </el-menu>
</template>

const menuRoutes = computed(() => {
  // 从根路由的 children 中提取侧边栏菜单
  const rootRoute = router.options.routes.find((item) => item.path === '/')
  return rootRoute?.children || []
})

import axios from 'axios'

// 创建统一请求实例
const service = axios.create({
  baseURL: '/api',
  timeout: 10000
})

service.interceptors.request.use((config) => {
  // 请求发出前统一注入 token
  const token = localStorage.getItem('token')

  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }

  return config
})

service.interceptors.response.use((response) => {
  // 只把真正的业务数据返回给调用方
  return response.data
})

export default service

import { onMounted, reactive, ref } from 'vue'
import { getUserList } from '@/api/user'

const loading = ref(false)
const tableData = ref([])
const total = ref(0)

// 列表查询参数
const queryParams = reactive({
  keyword: '',
  pageNum: 1,
  pageSize: 10
})

const fetchData = async () => {
  loading.value = true
  // 根据当前筛选条件拉取列表
  const res = await getUserList(queryParams)
  tableData.value = res.list
  total.value = res.total
  loading.value = false
}

onMounted(() => {
  fetchData()
})

views/users/
  ├── index.vue           # 页面容器
  ├── components/
  │   ├── SearchForm.vue
  │   ├── UserTable.vue
  │   └── UserDialog.vue

<router-view v-slot="{ Component }">
  <keep-alive :include="['UserList']">
    <component :is="Component" />
  </keep-alive>
</router-view>