网站设计潮流营销团队
「Art Design Pro」是什么？
最近在GitHub Trending Vue日、周榜第一的一个开源项目Art Design Pro，它是一个后台管理系统的模板，主要技术栈采用的是Vue3、TypeScript、Vite。基于ElementPlus的设计规范，打造的一个美观、实用的后台管理系统模板。
一、为什么我们要用Art Design Pro？
在传统的后台管理页面，页面展示不够新颖。这款后台管理页面，精心设计了配色、排版、动效。
同时这款开源项目布局简洁明了，无需任何操作手册和指导文档，可以让用户迅速找到所有功能。使用这款开源项目，你可以快速搭建出美观、实用的后台管理系统，从而抽出更多的时间放在业务创造上。
二、核心特色包括哪些？
1、前沿的技术栈：采用了Vue3、TypeScript、Vite、Element-Plus、Scss开发框架，提高性能和开发体验。
2、包含了常用的组件：使用Element Plus组件库，包含了80%的常用组件。文件路径
src/assets/styles/el-ui.scss
3、设置了路由系统：在项目启动的时候使用的静态路由，例如登录页，404等公共页面。在登录后，使用动态路由，可以根据后端返回的菜单数据动态生成，用于权限控制等。
静态路由配置位置：
src/router/routes/staticRoutes.ts
动态路由配置位置：
src/router/routes/asyncRoutes.ts
4、系统的自由配置：包括菜单样式、顶栏、设置中心、系统主色，可以根据你想要的快速修改。
系统 Logo配置文件：
src/components/core/base/ArtLogo.vue
系统名称配置文件：
src/config/index.ts
5、主题的自由定义：从整体布局到细节都可以个性定制。CSS的变量包括主题颜色、背景颜色、文字颜色、边框颜色等，都可以自适应Light和Dark模式。
文件路径：
src/assets/styles/variables.scss
6、丰富的图标种类：总共包含了600+个图标，还可以支持自行添加其他图标。
图标库目录：
src/assets/icons/system
7、权限配置：支持基于角色和菜单两种方式控制权限，修改根目录下.env 文件中， VITE_ACCESS_MODE 的值可切换模式
权限控制模式（frontend | backend）
VITE_ACCESS_MODE=frontend
图片
8、支持国际化：使用了vue-i18n插件，可以使用中文和英文两种语言。
├── language
│ ├── index.ts // 配置文件
│ └── locales // 语言包目录
│ ├── zh.json // 中文包
│ └── en.json // 英文包
图片
图片
三、主要应用场景？
1、企业后台系统：快速搭建金融、医疗等行业后台管理系统。
2、敏捷开发：借助这个项目，快速落地产品需求。
3、自学、教学项目案例：使用这个项目学习前端技术，同时也可以进行教学演示。
4、二次开发：基于此项目二次开发，增加个性化需求模块。
四、如何部署？
部署方式：
安装依赖
pnpm install
如果pnpm 安装失败 可以使用下面命令安装
pnpm install --ignore-scripts
启动本地开发环境
pnpm dev
启动生成环境
pnpm build
安装成功后，访问http://localhost:3006/
图片
五、项目地址
https://github.com/Daymychen/art-design-pro
今天的分享就到这里，感谢大家的阅读。如果你也需要一个后台管理系统模板，可以试试这个。
欢迎大家关注，每天都会分享更多开源项目
