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

👨 作者简介：大家好，我是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

整体架构图

数据层
Axios 封装
Mock.js 模拟服务
状态管理 Pinia
用户 Store
设置 Store
权限 Store
前端应用
App.vue
Vue Router 4
登录页
Layout 布局
首页仪表盘
权限管理
商品管理
数据大屏

核心功能模块

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 类型