Quasar Vue3 Admin Template：一个适合复杂中后台项目的前端模板

做后台系统，最耗时间地方往往不是页面本身，而是那些反复出现、又必须做稳事情：登录、路由、菜单、表格、权限、图表、国际化、构建配置、组件拆分。

quasar-vue3-admin-template 解决就是这类问题。它不是从零搭页面工具，而是一个基于 Vue 3、TypeScript、Quasar、Webpack 5 后台管理模板，适合拿来做企业内部系统、数据看板、运营后台、管理平台。

项目比较明显特点，是没有把所有逻辑都塞进一个 setup。业务页使用 Class 写法，基础组件仍然用 Vue 3 常规写法。这样复杂页面结构更清楚，组件也不会变成一大段难追踪响应式代码。

1. 解决什么问题

解决后台项目起步慢问题

很多后台系统功能差不多：登录页、主布局、侧边栏、菜单、表格、详情页、图表页、图标、国际化、接口请求、权限路由。

如果每个项目都重新搭一遍，时间浪费在重复劳动上。

这个模板已经把常用中后台骨架搭好，可以直接基于现有目录继续开发业务页面。

解决复杂页面代码难维护问题

后台页面通常不是几个按钮那么简单。一个表格页可能同时有：

- 查询条件

- 分页

- 新增编辑弹窗

- 详情页

- 图表展示

- 接口请求

- 状态监听

- 路由跳转

如果全部混在普通 setup 里，代码很容易变成长函数。

这个项目用 vue-facing-decorator 支持 Class 风格，把业务页按职责拆开：

- props 管外部输入

- get / set 管计算属性和双向绑定

- watch 管状态监听

- params 管请求参数和内部配置

- event 管用户交互

- http 管异步请求

好处是新人进来能快速知道逻辑放在哪里，后期改需求也更少误伤。

解决 Vuex 类型和结构混乱问题

后台系统经常有登录态、用户信息、菜单、权限、页面状态等全局数据。

如果状态模块写得松散，后面排查会很痛苦。

模板使用 vuex-module-decorators，让 Vuex 模块保持 Class 风格和类型约束。状态、mutation、action 结构更稳定，也更适合 TypeScript 项目。

解决后台常用能力重复造轮子问题

项目内已经包含多个常见页面和能力：

- 登录

- Dashboard

- 表格管理

- 表格详情

- 图表展示

- 地图展示

- JSON 展示

- JSON 编辑

- Markdown 渲染

- 图标管理

- 复制能力

- 国际化示例

- 多级菜单

这些不是最终业务功能，但够作为开发样板。拿来改，比从空白页开始快很多。

2. 特点和功能

基于 Vue 3 + TypeScript + Quasar

核心技术栈比较直接：

- Vue 3：主框架

- TypeScript：类型约束

- Quasar：UI 和后台布局能力

- Webpack 5：构建环境

- Vue Router 4：路由管理

- Vuex 4：状态管理

- Axios：接口请求

- vue-i18n：国际化

Quasar 本身组件体系比较完整，适合快速做后台管理界面。按钮、表单、表格、弹窗、布局这些不需要额外堆很多 UI 依赖。

业务页使用 Class 写法

项目最大特点是业务页面采用 vue-facing-decorator 的 Class 写法。

相比所有逻辑写进 setup，Class 写法更接近传统面向对象结构，适合字段多、方法多、接口多后台页面。

这类页面里，逻辑不是“少量状态 + 一个提交按钮”，而是很多功能并行存在。Class 写法能让每块逻辑位置固定，可读性更强。

基础组件保持 Composition API

项目没有为了统一而统一。

业务页用 Class 保持结构，基础组件仍然使用 Vue 3 标准 setup 写法。

这种混合模式比较实用：

- 业务页面重结构

- 基础组件重复用

- 简单组件不被 Class 包袱拖慢

- 复杂页面不被大段 setup 淹没

支持继承扩展

组件扩展使用 extend，不是传统 mixin。

这点对后台项目很重要。

mixin 常见问题是来源不清楚、字段冲突难发现、类型提示不稳定。

extend 继承链更明确，代码关系更容易追踪。

内置表格页面样板

表格是后台系统最常见页面。模板里有完整表格模块，包括：

- 列表页

- 新增编辑

- 详情组件

- 基础详情

- 图表详情

- 世界地图详情

这类结构适合拿来改成用户管理、订单管理、日志管理、设备管理等业务模块。

内置 Dashboard 和图表能力

项目包含 Dashboard 页面，并接入图表相关依赖：

- echarts

- chart.js

- jsvectormap

已有页面包含关系图、省市地图、城市地图、地图展示等示例。

适合做数据看板、运营分析、区域统计、拓扑关系展示。

支持 JSON 和 Markdown 场景

模板内置：

- JSON 查看

- JSON 编辑

- Markdown 渲染

- 代码高亮相关能力

这对配置后台、接口调试平台、文档管理、规则编辑器这类系统比较有用。

支持国际化

项目带 vue-i18n 和国际化示例页面。

如果系统需要中文、英文或多语言切换，可以直接沿用现有结构扩展。

SVG 图标生成

项目提供 npm run svg 命令，用来生成 SVG 映射文件：

npm run svg

生成目标：

src/utils/custom-svg.ts

后台系统图标多，如果手动维护图标引用，时间长了容易乱。自动生成映射更省事。

有在线预览

项目提供 Vue 3 版本预览地址：

https://dirkhe1051931999.github.io/v3-admin

也保留 Vue 2 Class 版本预览：

https://dirkhe1051931999.github.io/quasar

可以先看实际页面效果，再决定是否作为项目基础。

开发命令清楚

安装依赖：

yarn

本地开发：

yarn dev

代码检查：

yarn lint

格式化：

yarn format

生产构建：

npm run build

项目明确提示只支持 yarn 安装依赖，团队协作时依赖版本更容易保持一致。

适合什么项目

这个模板适合：

- 企业内部管理后台

- 数据看板

- 运营管理系统

- 配置管理平台

- 权限菜单型系统

- 需要大量表格和详情页项目

- 需要 TypeScript 和结构化代码项目

如果只是做一个很轻的活动页或单页面展示，这个模板会显得偏重。

但如果项目会持续迭代、页面越来越多、多人协作开发，它价值会更明显。