Ant-design-pro-环境搭建

wellknow

前期准备
安装node、git (自行百度)
( n8 l! J' @4 P* P& G& P& T: U$ h; @" h>node -v
  v16.20.2

安装
: h2 i" w! P* H从github仓库中直接安装最新的脚手架代码

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

复制代码

9 Z- A/ N4 L0 [  d% @$ i- f2 E
9 \. w  Y* e$ d, o0 T% d  |0 i, E目录结构

├── config                   # umi 配置，包含路由，构建等配置
1 s4 `% \5 H) X) ?: `* z+ d├── mock                     # 本地模拟数据
├── public
│   └── favicon.png          # Favicon
" Q& ]3 D9 m% E- X2 l; Q├── src
& t- R! ~( O4 `' s' |│   ├── assets               # 本地静态资源
+ P4 K* Y0 v8 K& J7 X: T│   ├── components           # 业务通用组件
: J! v2 B7 j9 j" u7 `: q4 j│   ├── e2e                  # 集成测试用例
│   ├── layouts              # 通用布局
( L# d/ Z& O8 W' o, B" ]5 y│   ├── models               # 全局 dva model
) w# B6 @1 f: R) x│   ├── pages                # 业务页面入口和常用模板
- a- x* d# Q& z, R│   ├── services             # 后台接口服务
+ C# j" O0 M( ?" v5 w' D, y  [4 s: \│   ├── utils                # 工具库
9 v3 ?1 A6 p: ]/ }- E│   ├── locales              # 国际化资源
. W% e& C. I( d" ]: C│   ├── global.less          # 全局样式
│   └── global.js            # 全局 JS
├── tests                    # 测试工具
├── README.md
└── package.json

本地开发
安装依赖

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

复制代码

0 ~. Y* m: `. u$ V- r9 J$ e1 F
启动完成后会自动打开浏览器访问
  k) I6 ]( @+ Lhttp://localhost:8000