郑州专业的网站建设公司哪家好太原互联网推广公司
「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
今天的分享就到这里,感谢大家的阅读。如果你也需要一个后台管理系统模板,可以试试这个。
欢迎大家关注,每天都会分享更多开源项目