Ant-design-pro-环境搭建

wellknow

前期准备
安装node、git (自行百度)
>node -v
: f: a5 B8 U" @4 _9 F/ B9 E  v16.20.2
, p, W7 M! B0 h9 [* ]% Y% R
安装
从github仓库中直接安装最新的脚手架代码

1. git clone --depth=1 https://github.com/ant-design/ant-design-pro.git
   $ g7 ]: r, Z; Q0 a0 L; g4 Q
2. cd ant-design-pro

复制代码

! n+ F( _0 o& V$ f目录结构

├── config                   # umi 配置，包含路由，构建等配置
) G. q& \7 N7 |0 }├── mock                     # 本地模拟数据
├── public
% d1 _& {$ S: M1 K1 P7 e! V│   └── favicon.png          # Favicon
├── src
0 ]3 r, U! D7 d6 L; |) u9 S* A│   ├── assets               # 本地静态资源
! R( A) e% Z' A6 ?│   ├── components           # 业务通用组件
│   ├── e2e                  # 集成测试用例
7 r+ f. m8 q7 T' J1 @, t) Q│   ├── layouts              # 通用布局
│   ├── models               # 全局 dva model
│   ├── pages                # 业务页面入口和常用模板
│   ├── services             # 后台接口服务
│   ├── utils                # 工具库
│   ├── locales              # 国际化资源
│   ├── global.less          # 全局样式
6 V$ J5 k3 ~# p1 P  a│   └── global.js            # 全局 JS
; t/ @0 i2 K. D" P' i├── tests                    # 测试工具
├── README.md
# X/ @6 J$ W) n0 x; B└── package.json

. V. H! z2 @3 n, z. O! c' r本地开发
. l$ ]" Q0 k+ k安装依赖
6 m2 |1 J( ^: c$ C1 G% f, m; s& u

1. npm install yarn -g
   1 ]: c0 _1 w6 x6 T2 U
2. yarn install
   
3. yarn start

复制代码

- B+ X2 }" H! L$ a
$ A; A0 a4 E' ~' a  E' p启动完成后会自动打开浏览器访问
" J1 @# T  A7 \http://localhost:8000