Ant-design-pro-环境搭建

wellknow

前期准备
3 F. D/ J$ R% S, b6 e安装node、git (自行百度)
! I& b; c/ p9 z# V; |: M$ R>node -v
( u1 i# z2 h+ z+ }# B: I  v16.20.2

5 W4 H; O  t8 w. O; u- g( i安装
从github仓库中直接安装最新的脚手架代码
9 y$ [% B7 k4 ^  E- c, c

1. git clone --depth=1 https://github.com/ant-design/ant-design-pro.git
   $ u+ `# y, A/ O* [* P
2. cd ant-design-pro

复制代码

7 p' x; `1 |! W: G& ]
目录结构

├── config                   # umi 配置，包含路由，构建等配置
% _9 o& }  b" X1 y& G0 ^├── mock                     # 本地模拟数据
├── public
# d& d7 Y' T' q9 z, r% T! G) D3 v! g│   └── favicon.png          # Favicon
4 n$ n0 r0 i6 P, A9 w├── src
5 X7 `8 g- h+ s8 J: d9 J% h│   ├── assets               # 本地静态资源
" g# Q6 H' e* J) u│   ├── components           # 业务通用组件
+ F- n9 I/ x0 C1 e2 D( U) l│   ├── e2e                  # 集成测试用例
│   ├── layouts              # 通用布局
│   ├── models               # 全局 dva model
$ ?$ z$ f9 }  E│   ├── pages                # 业务页面入口和常用模板
│   ├── services             # 后台接口服务
│   ├── utils                # 工具库
│   ├── locales              # 国际化资源
1 d+ d) {) i# e9 Q│   ├── global.less          # 全局样式
' @( d9 l; g' m# ^8 M; f, c2 _5 V│   └── global.js            # 全局 JS
* P0 J. q$ w9 T├── tests                    # 测试工具
; L& A9 O7 b9 i├── README.md
2 T: [0 Q' g' u7 @└── package.json

7 N" B3 B( |( h1 Z& L, q6 X& x
  p( F9 r, U  \, {本地开发
安装依赖
1 r3 s) f! s6 ~" T# ]: m# n5 W1 m

1. npm install yarn -g
   
2. yarn install
   
3. yarn start

复制代码

启动完成后会自动打开浏览器访问
& ^! E, c- p8 A( G3 R* @http://localhost:8000