Ant-design-pro-环境搭建

wellknow

前期准备
9 o- V( {+ `3 o8 l$ m安装node、git (自行百度)
>node -v
3 U3 Q+ E! Z) w" z& ], s* w  v16.20.2
( Q# J, s) g1 y9 W+ j- b$ N
, e$ T5 @8 J; D- G0 P/ O2 p安装
从github仓库中直接安装最新的脚手架代码
  i% N, A; j) @) o7 a4 ~* B

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

复制代码

' A  i, {# a: R+ x: a$ W# I
目录结构
7 d6 Z3 D3 B- t5 {

├── config                   # umi 配置，包含路由，构建等配置
├── mock                     # 本地模拟数据
* E7 r& j8 n9 D2 ^; e$ g├── public
3 ]. ]0 e! ]) u% ?( ^* a8 E│   └── favicon.png          # Favicon
* \- t) C  K3 D& M, s├── src
│   ├── assets               # 本地静态资源
│   ├── components           # 业务通用组件
8 J/ B. r6 y- u8 z: ]0 Q: c, v│   ├── e2e                  # 集成测试用例
│   ├── layouts              # 通用布局
  d" b2 o! e1 Q( s. O2 W: k0 k│   ├── models               # 全局 dva model
│   ├── pages                # 业务页面入口和常用模板
( N5 ^5 c9 f3 o, l+ _7 @│   ├── services             # 后台接口服务
│   ├── utils                # 工具库
│   ├── locales              # 国际化资源
) ?/ c8 }" Q4 L; u: j# h) E1 B│   ├── global.less          # 全局样式
│   └── global.js            # 全局 JS
4 d: p/ ]; H0 ?0 @3 s; H├── tests                    # 测试工具
├── README.md
└── package.json

& v5 C* m9 v4 {# r
本地开发
3 w' j$ w- N- n* g+ Z安装依赖
; k) @9 ^. i, O4 V+ G

1. npm install yarn -g
   
2. yarn install
   % K; j2 b2 p+ t' W
3. yarn start

复制代码

3 U( G1 z; B( a- x; S" N" H
启动完成后会自动打开浏览器访问
3 R! h6 [3 Y: @0 s. Yhttp://localhost:8000