搭建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后台管理系统
五、基于Ant DesignPro Vue实现通过SpringBoot后台加载自定义菜单- 前后端分离
目录
搭建Vue版Ant Design Pro后台管理系统一、准备二、安装1、从 GitHub 仓库中直接安装最新的脚手架代码2、安装依赖3、启动三、验证1、错误的用户名、密码2、认证成功后首页3、分析页四、源码目录结构1、源码目录结构说明2、源码目录结构截图一、准备
二、安装
1、从 GitHub 仓库中直接安装最新的脚手架代码
git clone --depth=1 /vueComponent/ant-design-vue-pro.git my-projectcd my-project
2、安装依赖
yarn install
如果网络状况不佳，可以使用 cnpm 进行加速，并使用 cnpm 代替 yarn
或者设置 yarn 的 npm 加载源，如 yarn config set registry https://registry.
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
