Ant Design Pro基础框架搭建

介绍

Ant Design Pro 是基于 Ant Design 和 umi 的封装的一整套企业级中后台前端/设计解决方案，致力于在设计规范和基础组件

在学习Ant Design Pro之前，要求我们有一定的umi和Ant Design基础

使用

提供了 pro-cli 来快速的初始化脚手架

# 使用 npm

npm i @ant-design/pro-cli -g

pro create 项目名

选择版本（umi@4，umi@3）以及安装脚手架的选择（simple（简单），complete（全量））

 

 我选择的是3版本，全量的脚手架

接着，我们cd 进入目录

安装依赖：

cnpm i

不要使用npm install ，会报错

运行

npm start 

 运行这个脚本会启动服务，自动打开默认浏览器展示你的页面。当你重新编辑代码后，页面还会自动刷新

还可以使用 npm run dev进行运行项目

运行的区别？

npm start运行的是Mock中的数据

npm run dev 开发环境，关闭mock数据，使用真实的接口，配置代理

页面效果

打开就会进入登录页，输入用户名密码，就会进入主页面

  

文件夹结构

目录结构

页面代码结构推荐

 这样，一个基础版的Ant Design Pro框架就搭建好了

其他配置请参考官网：开箱即用的中台前端/设计解决方案 - Ant Design Pro