淘宝网的网站设计特色手机软件开发培训班

「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

今天的分享就到这里，感谢大家的阅读。如果你也需要一个后台管理系统模板，可以试试这个。
欢迎大家关注，每天都会分享更多开源项目