ant design pro基本使用

Ant Design Pro是一个企业级中后前端解决方案.

准备

本地环境需要安装yarn, node 和git. 技术栈基于ES2015+, React, UmiJS, dva, g2和antd(Ant Design of React).

git和node的安装参考网上就可以, nodejs安装成功后, 即可使用npm. 如果你的网络环境不佳, 推荐使用cnpm( npm client for China mirror of npm).

$ npm install cnpm -g --registry=https://r.npm.taobao.org

yarn是为了弥补npm的一些缺陷而出现的:

(1) 安装的时候无法保证速度/一致性.

(2) 安全问题, 因为npm 安装时允许运行代码.

//在NPM 中安装
npm install -g yarn

安装

新建一个空的文件夹作为项目目录, 并在目录下执行:

yarn create umi

or

npm create umi

Select the boilerplate type (Use arrow keys)
❯ ant-design-pro  - Create project with an layout-only ant-design-pro boilerplate, use together with umi block.
  app             - Create project with a simple boilerplate, support typescript.
  block           - Create a umi block.
  library         - Create a library with umi.
  plugin          - Create a umi plugin.

目录结构

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

本地开发

安装依赖

npm install

启动

npm start