Vue 3 + TypeScript + Ant Design Vue + Vite 管理系统

这是一个基于 Vue 3、TypeScript、Vite 和 Ant Design Vue 构建的后台管理系统模板。项目集成了 Pinia 状态管理、Vue Router 路由控制以及 ESLint/Prettier 代码规范工具，旨在提供一个快速、高效的开发起点。

📚 文档

• 脚手架配置 (Scaffold): 统一封装了Vite、代理、插件等配置。
• 路由说明 (Router): 详细介绍了路由配置、权限控制及新增页面的方法。
• 开发服务器 (DevServer): 介绍代理配置、BaseURL 注入及运行时配置原理。
• 基座组件 (Core): 介绍基座组件的设计理念、使用方法及注意事项。
• 全局水印 (Watermark): 介绍全局水印功能的开启、配置与实现原理。
• 权限运行时 (Auth): gd-web-core/auth 子路径提供的集中式登录态、vMenu 路由权限、菜单权限、功能权限和路由守卫，PC 与移动端模板接入示例。
• 数据大屏 (Dashboard): gd-web-core/dashboard 提供 55 个零 DataV 运行时依赖的 Vue 组件，覆盖 DataV 2.10 的 38 项组件能力，同时保留强类型布局、主题与业务物料；图表通过统一 ECharts 引擎接入。

🛠️ 技术栈

• 框架: Vue 3 (Composition API)
• 语言: TypeScript
• 构建工具: Vite
• UI 组件库: Ant Design Vue
• 状态管理: Pinia
• 路由管理: Vue Router
• CSS 预处理: Less
• HTTP 请求: Axios
• 代码规范: ESLint + Prettier

🚀 快速开始

Dashboard 快速入口

应用入口只导入一次大屏样式：

import 'gd-web-core/dashboard/style.css';

页面组件默认使用精确子路径按需导入：

import { DvDashboardViewport } from 'gd-web-core/dashboard/components/DvDashboardViewport';
import { DvDashboardPanel } from 'gd-web-core/dashboard/components/DvDashboardPanel';
import { DvThreeColumnLayout } from 'gd-web-core/dashboard/components/DvThreeColumnLayout';

自定义图表使用通用 ECharts 容器：

import { Echarts } from 'gd-web-core/components/Echarts';

选择规则和完整示例见 Dashboard 文档。图表预设不进入运行时 组件库；消费项目只生成实际使用的强类型 option builder，再将结果传给 Echarts。 DvTrendChart 接收 categories 和 TrendSeries[]，不直接接收 option。

环境要求

• Node.js: version 20+
• Package Manager: pnpm

推荐使用 nvm 管理 Node 版本：

nvm use 20

安装依赖

pnpm install

开发环境运行

启动本地开发服务器，支持热重载：

pnpm dev

生产环境构建

编译并压缩代码用于生产环境：

pnpm build

⚙️ 配置说明

开发服务器代理

devServer.config.ts 用于配置开发环境的代理设置。

示例：

const proxy = {
  // Key: 代理路径前缀 (也是开发模式下的 baseUrl)
  // Value: 目标 API 服务器地址
  respj: 'http://dddev.yixx.cn/respj',
};
export default proxy;

在 pnpm dev 模式下，第一个 key (如 respj) 将自动作为 baseUrl。

📂 目录结构

project-root/
├── core/               # 基座组件：提供通用组件、函数、服务
│   ├── components/     # 通用组件
├── src/                # 业务逻辑目录
│   ├── api/            # 业务 API 接口 (TypeScript)
│   ├── assets/         # 静态资源
│   ├── components/     # 业务组件
│   ├── layout/         # 布局组件 (BasicLayout, TopLayout, SideLayout)
│   ├── router/         # 路由配置 (index.ts, permission.ts)
│   ├── store/          # 状态管理 (User, Menu, Setting, Permission，均为 .ts)
│   ├── styles/         # 全局样式
│   │   ├── variables.less # 变量
│   │   ├── global.less    # 全局样式
│   │   └── index.less     # 样式入口
│   ├── utils/          # 工具函数 (request.ts 等)
│   ├── views/          # 页面视图
│   │   ├── home/       # 首页
│   │   ├── login/      # 登录页
│   │   └── system/     # 系统管理页
│   ├── App.vue         # 根组件
│   └── main.ts         # 入口文件
├── devServer.config.ts # 开发环境代理配置
├── vite.config.ts      # Vite 配置 (TypeScript)
├── tsconfig.json       # TypeScript 主配置
└── tsconfig.node.json  # Node 相关 TypeScript 配置

💻 IDE 支持

推荐使用 VS Code 配合 Volar 插件以获得最佳的 Vue 3 开发体验。