Ant-design-pro-环境搭建

wellknow

前期准备
安装node、git (自行百度)
>node -v
- ^* ?; ?9 h; p! p# h: C  v16.20.2

安装
从github仓库中直接安装最新的脚手架代码
1 a6 Z9 S8 ~* ?# y4 l

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

复制代码

目录结构

├── config                   # umi 配置，包含路由，构建等配置
8 J9 d; V; Y& k. ?  z! w├── mock                     # 本地模拟数据
├── public
1 A: r: Y1 \# |/ X: V* ^│   └── favicon.png          # Favicon
├── src
  v# E/ k4 ?5 j2 H6 }│   ├── assets               # 本地静态资源
4 V- \" C1 W0 H* o1 ~' W│   ├── components           # 业务通用组件
│   ├── e2e                  # 集成测试用例
│   ├── layouts              # 通用布局
( u/ a; R& R  J; I3 g0 u: S│   ├── models               # 全局 dva model
│   ├── pages                # 业务页面入口和常用模板
│   ├── services             # 后台接口服务
' E: P2 ^- r4 i. u│   ├── utils                # 工具库
│   ├── locales              # 国际化资源
│   ├── global.less          # 全局样式
# J! I3 b6 J8 s+ k# x) p3 C│   └── global.js            # 全局 JS
├── tests                    # 测试工具
4 z! Z$ S  a+ d' l+ a├── README.md
( }, W/ P, n5 J5 u9 I" W! C  ^+ u└── package.json

6 Q- l* }; N$ U/ S" L0 T! i
本地开发
安装依赖

1. npm install yarn -g
   2 s" u# Y- ^9 z2 @/ K$ [
2. yarn install
   1 y* H8 E# e, [( b- t- M" v
3. yarn start

复制代码

; ]0 B8 K2 d/ J% {* H启动完成后会自动打开浏览器访问
http://localhost:8000