Ant-design-pro-环境搭建

wellknow

前期准备
( n5 G2 P) A% W安装node、git (自行百度)
5 S5 ]- K6 a% D+ t>node -v
. x$ |0 B1 M4 h6 G: {  v16.20.2

安装
* D8 N$ x; ]" I0 N6 K: ^2 E从github仓库中直接安装最新的脚手架代码

1. git clone --depth=1 https://github.com/ant-design/ant-design-pro.git
   
2. cd ant-design-pro

复制代码

, ]- M; J! {: f' w5 q
' U! ^3 E2 Q0 L( S' |目录结构

├── config                   # umi 配置，包含路由，构建等配置
9 M" x8 a% H  |9 i, `( q├── mock                     # 本地模拟数据
9 Q8 p/ t0 d! }' F├── public
" N% [2 u# z! k3 X* t│   └── favicon.png          # Favicon
├── src
: A' U0 f4 L+ u0 B  P. U8 R& W│   ├── assets               # 本地静态资源
1 ^+ H8 \* j: c; p│   ├── components           # 业务通用组件
│   ├── e2e                  # 集成测试用例
9 O' j1 ]' ~% P7 h% A# M) J│   ├── layouts              # 通用布局
7 G2 ?9 g6 |+ ?( a" S( F# J7 Y│   ├── models               # 全局 dva model
│   ├── pages                # 业务页面入口和常用模板
2 O" }& I2 \( e  q│   ├── services             # 后台接口服务
│   ├── utils                # 工具库
│   ├── locales              # 国际化资源
│   ├── global.less          # 全局样式
3 R! Q9 i3 ^, h2 s. i│   └── global.js            # 全局 JS
2 [2 y9 p/ [, Y1 n' D! m/ g├── tests                    # 测试工具
├── README.md
└── package.json

7 }4 U5 o$ ?4 y& U
本地开发
$ v4 h( g6 G0 V安装依赖
% y8 Q: x: n' M& s* t* N( ^

1. npm install yarn -g
   
2. yarn install
   6 B' l+ |5 \/ T" _
3. yarn start

复制代码

7 w$ n: `# P. z1 g! E# v; _4 r
% Y8 b* k6 x$ l. S! W启动完成后会自动打开浏览器访问
http://localhost:8000