react ant-design-pro项目搭建*（一）——脚手架准备

react ant-design-pro项目搭建——脚手架准备

ant-design-pro官网：  https://pro.ant.design/docs/getting-started-cn

前序准备

你的本地环境需要安装 yarn、node 和 git。我们的技术栈基于 ES2015+、React、UmiJS、dva、g2 和 antd，提前了解和学习这些知识会非常有帮助。

安装

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

yarn create umi

or

npm create umi

选择 ant-design-pro：

 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.

Ant Design Pro 脚手架将会自动安装。

以上版本为4.11.4

在新版本中还有下面的后续步骤，选择相应的就可以了

选择v4

选择你熟悉的 ts/js

目录结构

我们已经为你生成了一个完整的开发框架，提供了涵盖中后台开发的各类功能和坑位，下面是整个项目的目录结构。

├── 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

如果网络状况不佳，可以使用 tyarn 进行加速。

npm start

启动完成后会自动打开浏览器访问 http://localhost:8000，你看到下面的页面就代表成功了。

以上部分摘自己ant-design-pro官网，做完上面的操作，我们就有了一个初始的项目架构。后面会对项目服务器配置进行讲解。

 

下一章：react ant-design-pro项目搭建（二）——开发生产环境配置