Ant-design-pro-环境搭建

wellknow

前期准备
安装node、git (自行百度)
>node -v
  v16.20.2

安装
& c4 Y4 S9 e& j1 J从github仓库中直接安装最新的脚手架代码

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

复制代码

5 x: k( i, b4 z* i% v9 u
9 `6 x5 m' b% G0 n( U目录结构
' q0 J9 _) `, L5 J' c- F1 Q# F1 e

├── config                   # umi 配置，包含路由，构建等配置
% c' l# p$ b2 s├── mock                     # 本地模拟数据
├── public
│   └── favicon.png          # Favicon
' j  E3 G7 h$ f( y├── src
) v% m1 L! |+ @( U8 \│   ├── assets               # 本地静态资源
5 ~2 k$ B$ h+ l* E0 y) F5 P9 a│   ├── components           # 业务通用组件
: P: h8 ~( c  Q│   ├── e2e                  # 集成测试用例
' {& r  G9 K! M4 g0 j│   ├── layouts              # 通用布局
& a4 K- A3 [, {9 m. }5 W0 ?. r% a( \│   ├── models               # 全局 dva model
4 M1 q1 i) Z$ ?4 M/ \8 M2 ~  ?( E9 j│   ├── pages                # 业务页面入口和常用模板
│   ├── services             # 后台接口服务
8 l2 e1 [0 s0 c) a: X│   ├── utils                # 工具库
9 u+ G- j6 [/ E: |│   ├── locales              # 国际化资源
│   ├── global.less          # 全局样式
│   └── global.js            # 全局 JS
├── tests                    # 测试工具
├── README.md
└── package.json

( R6 D- A' R/ Y6 B7 `
# A, M: Q7 C3 {" |' @/ X本地开发
安装依赖
0 K8 a+ [+ k; s" ]( v' A

1. npm install yarn -g
   , x3 t- b6 U; o* u' H: Q, c: r
2. yarn install
   * c& @6 z; i2 B1 E6 j6 U1 ?% a
3. yarn start

复制代码

. x! c* R/ N& g
启动完成后会自动打开浏览器访问
& W/ y& y2 i2 {" g+ @" Khttp://localhost:8000