👨 作者简介：大家好，我是Taro，全栈领域创作者
✒️ 个人主页：唐璜Taro
🚀 支持我：点赞👍+📝 评论 + ⭐️收藏

前言

基于 Vue 3 + TypeScript + Vite + Element Plus + Pinia + Tailwind CSS 构建一个完整的后台管理系统，包含登录、仪表盘、权限管理、商品管理和数据大屏五大模块，所有数据使用 Mock.js 模拟。

Vue3 + TypeScript 后台管理系统完整方案

技术栈

• 构建工具: Vite 5
• 框架: Vue 3.4+ (Composition API + <script setup>)
• 语言: TypeScript 5
• 路由: Vue Router 4（动态路由 + 路由守卫）
• 状态管理: Pinia（替代 Vuex）
• UI 组件库: Element Plus（按需导入）
• CSS: Tailwind CSS 3
• HTTP 请求: Axios（封装请求/响应拦截器）
• 数据模拟: Mock.js + vite-plugin-mock
• 图表: ECharts 5
• 工具库: VueUse, dayjs, nprogress

项目目录结构

src/
├── api/                    # API 接口层（按模块拆分）
│   ├── user.ts
│   ├── acl/                # 权限相关接口
│   └── product/            # 商品相关接口
├── assets/                 # 静态资源
│   └── styles/             # 全局样式
├── components/             # 全局公共组件
│   ├── SvgIcon/
│   └── Pagination/
├── directive/              # 自定义指令（按钮权限等）
├── layout/                 # 布局组件
│   ├── index.vue           # 主布局
│   ├── Logo/               # 侧边栏 Logo
│   ├── Menu/               # 侧边栏菜单（递归组件）
│   ├── TabBar/             # 顶部标签页
│   └── Main/               # 主内容区
├── mock/                   # Mock 数据
│   ├── user.ts
│   ├── acl.ts
│   └── product.ts
├── router/                 # 路由配置
│   ├── index.ts
│   ├── routes.ts           # 静态 + 动态路由表
│   └── guard.ts            # 路由守卫
├── store/                  # Pinia Store
│   ├── modules/
│   │   ├── user.ts         # 用户信息 & token
│   │   ├── setting.ts      # 系统设置（折叠/暗黑模式）
│   │   └── permission.ts   # 动态路由权限
│   └── index.ts
├── types/                  # TypeScript 类型定义
│   ├── api.d.ts            # API 响应类型
│   ├── router.d.ts         # 路由 meta 类型扩展
│   └── store.d.ts
├── utils/                  # 工具函数
│   ├── request.ts          # Axios 封装
│   ├── auth.ts             # Token 操作
│   └── time.ts             # 时间问候语
├── views/                  # 页面组件
│   ├── login/              # 登录页
│   ├── home/               # 首页仪表盘
│   ├── screen/             # 数据大屏
│   ├── acl/                # 权限管理
│   │   ├── user/
│   │   ├── role/
│   │   └── menu/
│   └── product/            # 商品管理
│       ├── brand/
│       ├── attr/
│       ├── spu/
│       └── sku/
├── App.vue
└── main.ts

整体架构图

核心功能模块

1. 登录模块

• 表单验证（Element Plus Form Rules + TS 类型约束）
• Token 存储（localStorage）
• 路由守卫鉴权（已登录跳转首页，未登录跳转登录页）

2. Layout 布局

• 左侧菜单栏（可折叠，递归菜单组件）
• 顶部导航栏（面包屑、全屏、暗黑模式切换、用户头像下拉）
• 标签页 TabBar（多标签导航）
• 主内容区（路由视图 + keep-alive 缓存）

3. 权限管理模块

4. 商品管理模块

• 品牌管理: 品牌 CRUD，logo 图片上传
• 属性管理: 三级分类联动选择器 + 平台属性 CRUD
• SPU 管理: 三级分类筛选、SPU 列表、SPU 详情编辑（图片墙、销售属性）
• SKU 管理: SKU 列表、上架/下架、查看详情（Drawer 抽屉）

5. 数据大屏

• 全屏自适应布局（scale 缩放方案）
• ECharts 图表（折线图、柱状图、饼图、地图）
• 数据卡片展示

关键 TypeScript 实践点（学习重点）

这些是从 Vue 2 迁移到 Vue 3 + TS 最关键的差异点：

• defineProps / defineEmits 的泛型用法
• ref<T>() / reactive<T>() 类型推断与显式标注
• Pinia Store 的类型安全（state、getters、actions）
• Axios 封装中的泛型请求 request<T>()
• 路由 meta 类型扩展 declare module 'vue-router'
• 组件实例类型 InstanceType<typeof Component>
• 自定义指令的 TypeScript 类型