作为一名开发者，我发现传统系统在 用户体验 和 视觉设计 上不能完全满足需求。这让我开始思考，如何设计一款既精致美观又能提供顺畅操作体验的后台系统。

经过反复思考，我决定推出 Art Design Pro —— 它不仅融汇了先最新的技术，更秉持着对完美用户体验和视觉设计的追求。希望每一位使用它的你，都能在日常操作中感受到那份精心设计和细腻打磨。

解决的问题

视觉疲劳与乏味

长时间面对冷冰冰的界面，难免会让人感到疲惫。本模板力求通过精心设计的配色、排版和动效，让每一次点击、每一次滚动都像是一段美好的互动体验。

用户体验不佳

管理系统不仅要看得舒服，更要用得顺手。我希望通过简洁直观的布局和流畅自然的交互，让用户能迅速找到所需功能，享受到一种人性化的关怀。

重复造轮子，开发成本高

我都曾为从零开始设计一套完整的前端界面而头疼。这个模板提供了一整套经过反复打磨的 UI 组件和设计规范，让你可以快速搭建出既美观又实用的后台管理系统，从而有更多时间专注于业务创新。

核心特色

美学与实用并重

我相信技术和艺术可以并肩同行。模板采用了流行而不浮夸的设计风格，每一处细节都经过精心打磨，力求让界面既赏心悦目，又不会喧宾夺主，真正做到美学与实用的完美融合。

情感化的用户体验

每一个交互动效，每一处按钮反馈，都是为了让用户在操作时感受到温暖与人性化。我希望，使用这个模板时，你能体会到那种“界面在与你对话”的感觉，而不是冰冷的指令集合。

模块化、灵活定制

我提供了高度模块化的设计，各个组件都可以根据实际需求自由调整。无论是追求个性化定制，还是需要快速迭代开发，这个模板都能满足你的需求，让你轻松驾驭各种业务场景。

全响应式设计

我深知现代办公已经跨越了 PC 和移动设备。模板不仅适配各种屏幕尺寸，更通过精细的设计让不同设备下的用户都能获得一致而优质的体验。

拒绝过度封装

我坚持简洁和透明的原则，避免对系统进行过度封装。你可以轻松修改和扩展任意部分，无论是样式、组件还是功能，都可以根据项目需求进行快速定制，让开发过程更加自由高效。

项目预览

项目地址

演示地址：Vite + Vue3 + TS

官方文档：首页 | Art Design Pro

代码仓库：GitHub - Daymychen/art-design-pro: A Vue 3 admin dashboard template using Vite + TypeScript + Element Plus | vue3 admin | vue-admin — focused on user experience and visual design.

浅色模式

主页仪表盘

电子商务仪表盘

卡片

横幅

图表

系统图标库

富文本编辑器

礼花效果

全局搜索

通知中心

快捷聊天窗口

系统设置

表格

暗黑模式

项目指南

功能

下载源代码

git clone https://github.com/Daymychen/art-design-pro

启动项目

本项目使用 pnpm 工具安装依赖，推荐使用 pnpm

npm install -g pnpm或yarn global add pnpm

安装依赖

pnpm install

如果 pnpm install 安装失败，尝试使用下面的命令安装依赖

pnpm install --ignore-scripts

启动项目

pnpm dev

项目启动后会自动打开浏览器运行，默认访问地址：http://localhost:3006

如果你在启动项目遇到问题，官方文档社区按钮，加入社区，社区会帮助你解决问题。

目录结构

├── src│ ├── api // 接口请求│ │ ├── articleApi.ts│ │ ├── menuApi.ts│ │ ├── model│ │ │ └── articleModel.ts│ │ └── usersApi.ts│ ├── App.vue // 入口文件│ ├── assets // 资源│ │ ├── fonts // 字体文件│ │ │ ├── DMSans.woff2│ │ │ └── Montserrat.woff2│ │ ├── icons // 图标文件夹│ │ │ └── system // 系统图标│ │ ├── img // 图片目录│ │ ├── styles // 全局样式│ │ │ ├── app.scss│ │ │ ├── change.scss│ │ │ ├── dark.scss│ │ │ ├── el-dark.scss│ │ │ ├── el-light.scss│ │ │ ├── el-ui.scss // 优化 element plus 组件库默认样式│ │ │ ├── markdown.scss│ │ │ ├── mixin.scss // scss 混合宏（函数）│ │ │ ├── mobile.scss│ │ │ ├── one-dark-pro.scss│ │ │ ├── pages.scss│ │ │ ├── reset.scss│ │ │ ├── theme-animation.scss│ │ │ ├── transition.scss│ │ │ ├── tree.scss│ │ │ └── variables.scss // scss 主题变量│ │ └── svg│ │ └── loading.ts│ ├── components // 组件目录│ │ ├── core // 系统组件目录│ │ │ ├── banners│ │ │ ├── base│ │ │ ├── cards│ │ │ ├── charts│ │ │ ├── forms│ │ │ ├── layouts│ │ │ ├── media│ │ │ ├── others│ │ │ ├── tables│ │ │ ├── text-effect│ │ │ └── views│ │ └── custom // 用户组件目录│ │ └── comment-widget│ ├── composables // hooks│ │ ├── useAuth.ts // 权限│ │ ├── useCeremony.ts // 礼花效果│ │ ├── useChart.ts // 图表│ │ ├── useCheckedColumns.ts // 表格列选择│ │ ├── useCommon.ts // 公共│ │ ├── useSystemInfo.ts // 系统信息│ │ └── useTheme.ts // 主题│ ├── config│ │ ├── assets│ │ │ └── images.ts│ │ ├── festival.ts // 礼花配置│ │ ├── index.ts // 系统配置│ │ └── types│ │ └── index.ts│ ├── directives // 自定义指令│ │ ├── highlight.ts // 代码高亮指令│ │ ├── index.ts│ │ ├── permission.ts // 权限指令│ │ └── ripple.ts // 水波纹指令│ ├── enums│ │ ├── appEnum.ts // 公共枚举│ │ └── formEnum.ts // 表格枚举│ ├── env.d.ts│ ├── language // 多语言│ │ ├── index.ts│ │ └── locales│ │ ├── en.json│ │ └── zh.json│ ├── main.ts│ ├── mock│ │ ├── json│ │ │ └── chinaMap.json│ │ ├── temp│ │ │ ├── articleList.ts│ │ │ ├── commentDetail.ts│ │ │ ├── commentList.ts│ │ │ └── formData.ts│ │ └── upgradeLog.ts // 系统升级日志│ ├── plugins│ │ └── echarts│ │ └── index.ts│ ├── router│ │ ├── guards // 路由钩子│ │ │ ├── afterEach.ts│ │ │ └── beforeEach.ts│ │ ├── index.ts│ │ ├── routes // 路由配置文件，静态路由、动态路由│ │ │ ├── asyncRoutes.ts│ │ │ └── staticRoutes.ts│ │ ├── routesAlias.ts // 路由别名│ │ └── utils│ │ ├── menuToRouter.ts│ │ ├── registerRoutes.ts│ │ └── utils.ts│ ├── store // pinia │ │ ├── index.ts│ │ └── modules│ │ ├── menu.ts│ │ ├── setting.ts│ │ ├── table.ts│ │ ├── user.ts│ │ └── worktab.ts│ ├── types // 类型定义│ ├── utils // 工具包│ └── views // 页面├── tsconfig.json└── vite.config.ts

新建页面

在 src/views 下创建一个页面

 
 
test page
 

tips：上面的例子中我们添加了一个页面，页面 class=\"page-content\" 这个类名可以将盒子最小高度始终撑满屏幕剩余高度

路由注册

页面创建完成后需要注册路由才能访问页面，配置文件路径：src/router/routes/asyncRoutes.ts

一级路由（一级菜单）：

export const asyncRoutes: MenuListType[] = [ { id: 0, path: \'/test/index\', name: \'Test\', component: \'/test/index\', meta: { title: \'测试页\', keepAlive: true } }]

完成上面的步骤后就可以访问页面了

多级路由（多级菜单）：

export const asyncRoutes: MenuListType[] = [ { id: 1, name: \'Form\', path: \'/form\', component: RoutesAlias.Home, meta: { title: \'表单\', icon: \'\', keepAlive: false }, children: [ { id: 11, path: \'basic\', name: \'Basic\', component: \'/form/basic\', meta: { title: \'基础表单\', keepAlive: true } }, { id: 12, path: \'step\', name: \'Step\', component: \'/form/step\', meta: { title: \'分步表单\', keepAlive: true } } ] }]

静态路由配置：

配置文件路径： src/router/routes/staticRoutes.ts

export const staticRoutes: AppRouteRecordRaw[] = [ { path: \'/test\', name: \'Test\', component: () => import(\'@views/test/index.vue\'), meta: { title: \'测试页面\', isHideTab: true, setTheme: true } }]

配置完成后你可以访问：http://localhost:3006/#/test 查看新建的页面，到这里静态路由注册完成。

tips：如果静态路由在动态路由表也配置了，需要把静态路由中的配置去除，因为动态路由会自动注册路由。

主页配置

修改 HOME_PAGE 属性，配置文件路径：src/router/routesAlias.ts

// 主页路由export const HOME_PAGE = RoutesAlias.Dashboard

路由属性（菜单属性）

export type MenuListType = { id: number path: string // 路由 name: string // 组件名 component?: string // 组件路径 meta: { title: string // 菜单名称 icon?: string // 菜单图标 showBadge?: boolean // 是否显示徽标 showTextBadge?: string // 是否显示新徽标 isHide?: boolean // 是否在菜单中隐藏 isHideTab?: boolean // 是否在标签页中隐藏 link?: string // 链接 isIframe?: boolean // 是否是 iframe keepAlive: boolean // 是否缓存 authList?: Array // 可操作权限 isFirstLevel?: boolean // 是否为一级菜单（系统自动处理，不需要手动添加） roles?: string[] // 角色 } children?: MenuListType[] // 子菜单}

路径别名用法

系统定义了常用的文件夹路径，你使用这些路径别名就可以方便的导入图片等资源

alias: { \'@\': fileURLToPath(new URL(\'./src\', import.meta.url)), \'@views\': resolvePath(\'src/views\'), \'@imgs\': resolvePath(\'src/assets/img\'), \'@icons\': resolvePath(\'src/assets/icons\'), \'@utils\': resolvePath(\'src/utils\'), \'@stores\': resolvePath(\'src/store\'), \'@plugins\': resolvePath(\'src/plugins\'), \'@styles\': resolvePath(\'src/assets/styles\')}

使用示例：

import imgUrl from \'@imgs/state/500.png\'

CSS 变量写法

项目定义了一套完整的 CSS 变量，你可以使用这些变量来方便优雅的开发出颜值逆天的页面

文件路径：src/assets/styles/variables.scss

CSS 变量包括主题颜色、背景颜色、文字颜色、边框颜色、阴影、媒体查询（设备尺寸），这些变量能自适应 Light 跟 Dark 模式。

// 默认主题变量 ｜ Light 主题变量:root { // Theme color --art-primary: 93, 135, 255; --art-secondary: 73, 190, 255; --art-error: 250, 137, 107; --art-info: 83, 155, 255; --art-success: 19, 222, 185; --art-warning: 255, 174, 31; --art-danger: 255, 77, 79; // Theme background color --art-bg-primary: 236, 242, 255; --art-bg-secondary: 232, 247, 255; --art-bg-success: 230, 255, 250; --art-bg-error: 253, 237, 232; --art-bg-info: 235, 243, 254; --art-bg-warning: 254, 245, 229; --art-bg-danger: 253, 237, 232; --art-hoverColor: 246, 249, 252; --art-grey100: 242, 246, 250; --art-grey200: 234, 239, 244; --art-color: #ffffff; --art-light: #f9f9f9; --art-dark: #1e2129; // Background color | Hover color --art-text-muted: #99a1b7; --art-gray-100: #f9f9f9; --art-gray-100-rgb: 249, 249, 249; --art-gray-200: #f1f1f4; --art-gray-200-rgb: 241, 241, 244; --art-gray-300: #dbdfe9; --art-gray-300-rgb: 219, 223, 233; --art-gray-400: #c4cada; --art-gray-400-rgb: 196, 202, 218; --art-gray-500: #99a1b7; --art-gray-500-rgb: 153, 161, 183; --art-gray-600: #78829d; --art-gray-600-rgb: 120, 130, 157; --art-gray-700: #4b5675; --art-gray-700-rgb: 75, 86, 117; --art-gray-800: #252f4a; --art-gray-800-rgb: 37, 47, 74; --art-gray-900: #071437; --art-gray-900-rgb: 7, 20, 55; // Text color --art-text-muted: #99a1b7; --art-text-gray-100: #f9f9f9; --art-text-gray-200: #f1f1f4; --art-text-gray-300: #dbdfe9; --art-text-gray-400: #c4cada; --art-text-gray-500: #99a1b7; --art-text-gray-600: #78829d; --art-text-gray-700: #4b5675; --art-text-gray-800: #252f4a; --art-text-gray-900: #071437; // Border --art-border-color: #eaebf1; --art-border-dashed-color: #dbdfe9; --art-root-card-border-color: #f1f1f4; // Shadow --art-box-shadow-xs: 0 0.1rem 0.75rem 0.25rem rgba(0, 0, 0, 0.05); --art-box-shadow-sm: 0 0.1rem 1rem 0.25rem rgba(0, 0, 0, 0.05); --art-box-shadow: 0 0.5rem 1.5rem 0.5rem rgba(0, 0, 0, 0.075); --art-box-shadow-lg: 0 1rem 2rem 1rem rgba(0, 0, 0, 0.1); // Root card box、shadow --art-root-card-box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.03); --art-root-card-border-color: #f1f1f4; // Theme background color --art-bg-color: #fafbfc; // 最底部背景颜色 --art-main-bg-color: #ffffff;}// Dark 主题变量html.dark { // Theme color --art-primary: 93, 135, 255; --art-secondary: 73, 190, 255; --art-error: 250, 137, 107; --art-info: 83, 155, 255; --art-success: 19, 222, 185; --art-warning: 255, 174, 31; --art-danger: 255, 77, 79; // Theme background color --art-bg-primary: 37, 54, 98; --art-bg-secondary: 28, 69, 93; --art-bg-success: 27, 60, 72; --art-bg-error: 75, 49, 61; --art-bg-info: 34, 54, 98; --art-bg-warning: 77, 58, 42; --art-bg-danger: 100, 49, 61; --art-hoverColor: 51, 63, 85; --art-grey100: 51, 63, 85; --art-grey200: 70, 86, 112; --art-color: #000000; --art-light: #1b1c22; --art-dark: #272a34; // Background color | Hover color --art-text-muted: #636674; --art-gray-100: #1b1c22; --art-gray-100-rgb: 27, 28, 34; --art-gray-200: #26272f; --art-gray-200-rgb: 38, 39, 47; --art-gray-300: #363843; --art-gray-300-rgb: 54, 56, 67; --art-gray-400: #464852; --art-gray-400-rgb: 70, 72, 82; --art-gray-500: #636674; --art-gray-500-rgb: 99, 102, 116; --art-gray-600: #808290; --art-gray-600-rgb: 128, 130, 144; --art-gray-700: #9a9cae; --art-gray-700-rgb: 154, 156, 174; --art-gray-800: #b5b7c8; --art-gray-800-rgb: 181, 183, 200; --art-gray-900: #f5f5f5; --art-gray-900-rgb: 245, 245, 245; // Text color --art-text-muted: #636674; --art-text-gray-100: #1b1c22; --art-text-gray-200: #26272f; --art-text-gray-300: #363843; --art-text-gray-400: #464852; --art-text-gray-500: #636674; --art-text-gray-600: #808290; --art-text-gray-700: #9a9cae; --art-text-gray-800: #b5b7c8; --art-text-gray-900: #f5f5f5; // Border --art-border-color: #26272f; --art-border-dashed-color: #363843; --art-root-card-border-color: #1e2027; // Shadow --art-box-shadow-xs: 0 0.1rem 0.75rem 0.25rem rgba(0, 0, 0, 0.05); --art-box-shadow-sm: 0 0.1rem 1rem 0.25rem rgba(0, 0, 0, 0.05); --art-box-shadow: 0 0.5rem 1.5rem 0.5rem rgba(0, 0, 0, 0.075); --art-box-shadow-lg: 0 1rem 2rem 1rem rgba(0, 0, 0, 0.1); // Root card box、shadow --art-root-card-box-shadow: none; --art-root-card-border-color: #1e2027; // Theme background color --art-bg-color: #070707; --art-main-bg-color: #161618;}// CSS 全局变量:root { --console-margin: 20px; // 工作台盒子间距 --art-card-border: rgba(var(--art-gray-300-rgb), 0.6); // 卡片边框颜色 --art-card-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.04); // 卡片阴影}// 媒体查询-设备尺寸// notebook$device-notebook: 1600px;// ipad pro$device-ipad-pro: 1180px;// ipad$device-ipad: 800px;// ipad-竖屏$device-ipad-vertical: 900px;// mobile$device-phone: 500px;

使用示例：

# 文字color: var(--art-gray-100);color: var(--art-gray-900);# 边框border: 1px solid var(--art-border-color);border: 1px solid var(--art-border-dashed-color);# 背景颜色（白色｜黑色）background-color: var(--art-main-bg-color);# 阴影box-shadow: var(--art-box-shadow);box-shadow: var(--art-box-shadow-xs);box-shadow: var(--art-box-shadow-sm);box-shadow: var(--art-box-shadow-lg);

如果你觉得颜色太深可以使用 -rgb 的变量结合 rgba() 来调整

color: rgba(var(--art-gray-800-rgb), 0.6);

主题色

你可以通过 var(--main-color) 使用不透明的主题主色。同时，也提供了 9 个不同透明度等级的主题色变量，方便在不同场景中灵活应用：

# 不透明的主色color: var(--main-color);# 具有不同透明度的主题背景色background-color: var(--el-color-primary-light-1); # 最深background-color: var(--el-color-primary-light-9); # 最浅

tips：--el-color-primary-light-1 到 --el-color-primary-light-9 分别代表从深到浅的九级亮色，适合用于悬浮态、边框、背景等场景。

unplugin 自动导入

项目已集成自动导入配置，无需手动导入 Vue API、Element Plus 组件及系统通用组件，使用时可直接书写，开发更高效。

你不再需要这样：

// demo1: Vue APIimport { ref } from \'vue\'const count = ref(0)// demo2: Element Plus 组件import { ElButton } from \'element-plus\'按钮// demo3: 系统组件import Logo from \'components/Logo\'

现在你只需这样：

// demo1: Vue APIconst count = ref(0)// demo2: Element Plus 组件按钮// demo3: 系统组件

说明：由 unplugin-auto-import 与 unplugin-vue-components 自动完成引入操作，支持类型提示，支持 Tree-shaking，无需担心性能问题。

Element Plus 组件库

官网：一个 Vue 3 UI 框架 | Element Plus

本项目基于 Element Plus 组件库构建，并在视觉设计与用户体验方面进行了特殊优化，进一步提升了整体界面效果与交互体验。

iconfont 图标库

项目图标使用 iconfont 提供，内置了 600+ 的图标，可以满足大部分的图标需求。

如果你需要添加或者自定义图标库，可以访问这个链接 系统图标库 ，进入后你可以把它添加到自己的项目中进行使用。

使用方式

你可以在菜单中找到 Icon 图标，里面汇集了所有的图标，点击复制可以拿到图标的 Unicode 或 Font class。

Unicode 用法



Font class 用法

图标库目录：src/assets/icons/system

注意：为了方便用户拓展图标库，系统图默认使用 iconfont-sys 类名，而不是 iconfont

图标库链接过期：请点击 官网 顶部社区按钮，进入 QQ 群 @群主或者管理员更换链接

环境变量

说明

环境变量位于项目根目录下 .env、.env.development、.env.production

.env

• 作用：适用于所有环境，里面定义的变量会在任何环境下都能访问。
• 用法：一般放置一些通用的配置，比如 API 基础地址、应用名称等。

.env.development

• 作用：仅适用于开发环境。当你运行 pnpm dev 时，Vue 会加载这个文件中的环境变量。
• 用法：适合放置开发阶段的配置，比如本地 API 地址、调试设置等。

.env.production

• 作用：仅适用于生产环境。当你运行 pnpm build 时，Vue 会加载这个文件中的环境变量。
• 用法：适合放置生产阶段的配置，比如生产 API 地址、禁用调试模式等。

自定义环境变量

自定义环境变量以 VITE_ 开头，比如：VITE_PROT

你可以在项目代码中这样访问它们

console.log(import.meta.env.VITE_PROT);

.env

# 【通用】环境变量# 版本号VITE_VERSION = 2.2.86# 端口号VITE_PORT = 3006# 网站地址前缀VITE_BASE_URL = /art-design-pro/# API 地址前缀VITE_API_URL = https://m1.apifoxmock.com/m1/6400575-6097373-default# 权限模式（ frontend ｜ backend ）VITE_ACCESS_MODE = frontend# 是否打开路由信息VITE_OPEN_ROUTE_INFO = false# 锁屏加密密钥VITE_LOCK_ENCRYPT_KEY = jfsfjk1938jfj

.env.development

# 【开发】环境变量# 网站地址前缀VITE_BASE_URL = /# API 地址前缀VITE_API_URL = https://m1.apifoxmock.com/m1/6400575-6097373-default# Delete consoleVITE_DROP_CONSOLE = false

.env.production

# 【生产】环境变量# 网站地址前缀VITE_BASE_URL = /art-design-pro/# API 地址前缀VITE_API_URL = https://m1.apifoxmock.com/m1/6400575-6097373-default# Delete consoleVITE_DROP_CONSOLE = true

组件封装

为提高项目结构的可维护性与组件复用性，组件应按功能分类存放：

• @/components/custom：自定义业务组件目录
  供开发者根据业务需求封装的组件，适用于项目中具体场景的复用组件。
• @/components/core：系统核心组件目录
  包含系统级通用组件，例如布局容器、主题切换、菜单等，具备高度通用性与系统依赖性。

系统Logo

系统 Logo 采用图片形式展示，如需更换 Logo，仅需修改图片资源路径，无需改动组件逻辑。

配置文件路径：src/components/core/base/ArtLogo.vue

系统名称

系统名称统一通过配置文件管理，如需更改，只需修改 systemInfo.name 属性即可实现全局替换。

配置文件路径：src/config/core/base-config.ts

export const createBaseConfig = (): SystemConfig => ({ systemInfo: { name: \'Art Design Pro\' // 系统名称 }})

多语言

项目使用 vue-i18n 插件，目前集成了 中文 和 英文 两种语言。
目前对菜单、顶栏、设置中心等组件进行了国际化，其他地方根据需求自行配置。

├── language│ ├── index.ts // 配置文件│ └── locales // 语言包目录│ ├── zh.json // 中文包│ └── en.json // 英文包

在模版中使用

{{ $t(\'setting.color.title\') }}

如何获取当前语言

import { useI18n } from \"vue-i18n\";const { locale } = useI18n();

如何配置多语言

修改 src/language/index.ts 在 messages 中增加你要的配置的语言，然后在 language 目录新建一个文件，如 en.ts

import { createI18n } from \"vue-i18n\";import en from \"./en\";import zh from \"./zh\";import { LanguageEnum } from \"@/enums/appEnum\";const lang = createI18n({ locale: LanguageEnum.ZH, // 设置语言类型 legacy: false, // 如果要支持compositionAPI，此项必须设置为false; globalInjection: true, // 全局注册$t方法 fallbackLocale: LanguageEnum.ZH, // 设置备用语言 messages: { en, zh, },});export default lang;

权限

参考官方文档：权限说明 | Art Design Pro

git提交

代码提交校验与格式化：

使用 ESLint、Prettier、Stylelint 等工具，配合 Husky、Lint-staged，实现代码提交时的自动校验与格式化，规范团队开发流程。

代码提交规范化：

使用 CommitLint、cz-git 等工具，规范 Git 提交信息，提升项目的可维护性和协作效率。

自动化

代码提交会自动执行配置好的文件，自动完成代码校验、和格式。位于 package.json 中配置。

\"lint-staged\": { \"*.{js,ts}\": [ \"eslint --fix\", \"prettier --write\" ], \"*.{cjs,json}\": [ \"prettier --write\" ], \"*.{vue,html}\": [ \"eslint --fix\", \"prettier --write\", \"stylelint --fix\" ], \"*.{scss,css}\": [ \"stylelint --fix\", \"prettier --write\" ], \"*.md\": [ \"prettier --write\" ]}

提交规范

feat, // 新增功能fix, // 修复缺陷docs, // 文档变更style, // 代码格式（不影响功能，例如空格、分号等格式修正）refactor, // 代码重构（不包括 bug 修复、功能新增）perf, // 性能优化test, // 添加疏漏测试或已有测试改动build, // 构建流程、外部依赖变更（如升级 npm 包、修改 webpack 配置等）ci, // 修改 CI 配置、脚本revert, // 回滚 commitchore, // 对构建过程或辅助工具和库的更改（不影响源文件、测试用例）wip // 对构建过程或辅助工具和库的更改（不影响源文件、测试用例）

提交代码

git add .pnpm commit...git push

构建与部署

打包

pnpm build

构建打包成功之后，会在根目录生成对应的应用下的 dist 文件夹，里面就是构建打包好的文件

部署

部署时可能会发现资源路径不对，只需要修改 .env.production 文件即可。

# 根据自己存放的静态资源路径来更改配置VITE_BASE_URL = /art-design-pro/

部署到非根目录

需要更改 .env.production 配置，把 VITE_BASE_URL 改成你存放项目的路径，比如:

VITE_BASE_URL = /art-design-pro/

然后在 nginx 配置文件中配置

server { location /art-design-pro { alias /usr/local/nginx/html/art-design-pro; index index.html index.htm; }}

代码如何保持最新

如果你在基于本项目进行开发，并希望后续持续同步开源仓库的更新，建议按以下方式配置和操作：

1、克隆代码源码

git clone https://github.com/Daymychen/art-design-pro

2、添加自己的 git 仓库作为远程源

# 添加远程源（up 为自定义名称，可自行更改）git remote add up 

3、推送代码到你自己的仓库

# 将代码推送到你自己的 Git 仓库# 注意：main 为分支名，请根据你的实际分支进行替换git push up main

4、同步你自己仓库的最新代码（可选）

# 从你自己的远程仓库拉取更新git pull up main

5、同步开源项目的最新代码（推荐定期执行）

# 从开源仓库拉取最新代码（main 为默认主分支，请按需修改）git pull origin main

注意：同步更新前建议先 git pull 拉取代码并处理冲突，确保本地变更不会被覆盖。合并后再推送到你的远程仓库。

结语

Art Design Pro 是一个将美学与实用性完美融合的 Vue 3 后台系统模板，旨在为开发者提供高效、优雅的开发体验。无论是精致的 UI 设计、流畅的交互体验，还是模块化的架构和灵活的定制能力，都体现了我们对细节的极致追求和对用户需求的深刻理解。希望这个开源项目能成为你快速构建高质量管理系统的得力助手，释放更多时间专注于业务创新。

感谢每一位使用和支持 Art Design Pro 的开发者！我们期待你的反馈和贡献，欢迎加入官方社区，一起打造更出色的开发体验。立即开始，探索无限可能！

立即体验 Art Design Pro | 查看代码仓库