Ant Design Pro 4.x学习笔记（一）基本介绍

Ant Design Pro 4.x学习笔记（一）基础

简介

自己学习的一点心得，希望有不足的地方，轻喷。
Ant Design Pro 是ant的一个项目，是一个企业级中后台前端/设计解决方案，与Ant Design 一脉同源。学习Ant Design Pro 首先要具有如下知识： ES2015+、React、UmiJS、dva和antd。

创建项目

这里需要提前安装配置好node环境，建议安装yarn,使用taobao源。

全局安装umiJS

yarn global add umi

or

npm install -g umi

安装完以后，对于win系统需要修改下配置文件。解决运行时报：目录错误的问题
进入：node目录下node_global\bin路径
编辑：create-umi.cmd
删除:%dp0%
如我修改后的配置

@"C:\Users\SFC\AppData\Local\Yarn\Data\global\node_modules\.bin\create-umi.cmd"   %*

创建第一个项目

新建一个空文件夹，并在目录下执行

create-umi

选择第一个ant-design-pro

这里有TypeScript和JavaScript根据自己需要选择，我这里以JS为例

选择版本，这里使用的是最新版，所以直接回车

项目创建成功

到这里就创建了一个开发框架，下面是目录结构

├── config                   # umi 配置，包含路由，构建等配置
├── mock                     # 本地模拟数据
├── public
│   └── favicon.png          # Favicon
├── src
│   ├── assets               # 本地静态资源
│   ├── components           # 业务通用组件
│   ├── e2e                  # 集成测试用例
│   ├── layouts              # 通用布局
│   ├── locales              # 国际化资源,语言
│   ├── models               # 全局 dva model
│   ├── pages                # 业务页面入口和常用模板
│   ├── services             # 后台接口服务
│   ├── utils                # 工具库
│   ├── global.less          # 全局样式
│   └── global.js            # 全局 JS
├── tests                    # 测试工具

安装依赖

执行以下命令

npm install

启动项目

npm start

启动完成后会自动打开浏览器访问 http://localhost:8000

安装所有示例区块

 npm run fetch:blocks