搭建Vue版Ant Design Pro后台管理系统

此文章通过基于Vue实现的Ant DesignPro脚手架快速构建一个后台管理系统的前端

相关文档链接

• 1、【Ant Design Pro of Vue 官方文档】
• 2、【Vue 官方文档】
• 3、【Vue Router 官方文档】

Ant Design Pro相关系列文章：
一、AntDesign Pro安装过程
二、基于Ant DesignPro实现通过SpringBoot后台加载自定义菜单-前端部分
三、基于Ant DesignPro实现通过SpringBoot后台加载自定义菜单-SpringBoot后端部分
四、搭建Vue版Ant Design Pro后台管理系统

一、准备

序号	组件名称	版本	说明
1	Git		代码版本控件客户端
2	NodeJS	v16.17.0
3	Vue	3.0

二、安装

1、从 GitHub 仓库中直接安装最新的脚手架代码

git clone --depth=1 https://github.com/vueComponent/ant-design-vue-pro.git my-project
cd my-project

2、安装依赖

yarn install

如果网络状况不佳，可以使用 cnpm 进行加速，并使用 cnpm 代替 yarn
或者设置 yarn 的 npm 加载源，如 yarn config set registry https://registry.npm.taobao.org

3、启动

yarn run serve

三、验证

登录http://localhost:8000

1、错误的用户名、密码

2、认证成功后首页

3、分析页

四、源码目录结构

1、源码目录结构说明

├── public
│ └── logo.png # LOGO
| └── index.html # Vue 入口模板
├── src
│ ├── api # Api ajax 等
│ ├── assets # 本地静态资源
│ ├── config # 项目基础配置，包含路由，全局设置
│ ├── components # 业务通用组件
│ ├── core # 项目引导, 全局配置初始化，依赖包引入等
│ ├── router # Vue-Router
│ ├── store # Vuex
│ ├── utils # 工具库
│ ├── locales # 国际化资源
│ ├── views # 业务页面入口和常用模板
│ ├── App.vue # Vue 模板入口
│ └── main.js # Vue 入口 JS
│ └── permission.js # 路由守卫(路由权限控制)
│ └── global.less # 全局样式
├── tests # 测试工具
├── README.md
└── package.json

2、源码目录结构截图