Ant-design-pro-环境搭建

wellknow

前期准备
安装node、git (自行百度)
; a7 ^" i# ]" Y3 T, }7 T) g. W6 c>node -v
9 _* H% z* G# d$ l$ K( z" i  v16.20.2

& L3 `3 N; ~  T' Z. N' [" C8 N  c安装
从github仓库中直接安装最新的脚手架代码
1 H$ Z& T) F) i% s$ n/ l& E* E

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

复制代码

3 D! Y& D3 ~2 j4 D/ w& a目录结构

├── config                   # umi 配置，包含路由，构建等配置
├── mock                     # 本地模拟数据
( p. n* p1 p! ^  V0 M* D├── public
0 L$ b3 x; S' A# o) \% l│   └── favicon.png          # Favicon
├── src
│   ├── assets               # 本地静态资源
# `8 [, G; v) p3 S4 E│   ├── components           # 业务通用组件
2 o$ b, ?* n7 I% J│   ├── e2e                  # 集成测试用例
│   ├── layouts              # 通用布局
# Y7 u* V( L+ m│   ├── models               # 全局 dva model
/ P5 V3 ~% p9 H$ r5 P│   ├── pages                # 业务页面入口和常用模板
│   ├── services             # 后台接口服务
1 @( h5 p7 z3 j2 D│   ├── utils                # 工具库
2 P- ]& ^; a* a5 ^$ ]7 u# z; a& }) ^│   ├── locales              # 国际化资源
│   ├── global.less          # 全局样式
) n+ R  |  w: `6 I. v, X2 L% {, N│   └── global.js            # 全局 JS
├── tests                    # 测试工具
├── README.md
) k! D- {% ?9 ?4 M5 E└── package.json

- |  N3 N; `2 ]6 e本地开发
安装依赖
2 _; k7 Y1 W8 e" W7 |! `! d

1. npm install yarn -g
   
2. yarn install
   ) ^6 Y3 u( K" Y7 {- v- G0 \: D
3. yarn start

复制代码

2 k! u1 T; L5 w7 _
启动完成后会自动打开浏览器访问
5 W4 }" Y: D3 y. [; ^0 Nhttp://localhost:8000