1、ant-design-pro 概述

1.1 项目简介

Ant Design Pro 是基于 Ant Design 和 umi 的封装的一整套企业级中后台前端/设计解决方案。一句话，开箱即用的web框架。

1.2 项目架构

• 官方文档
• github

2、run 一个 demo

2.1 环境依赖

2.1.1 npm安装

Node.js是一个新的后端(后台)语言，它的语法和JavaScript类似，所以可以说它是属于前端的后端语言，后端语言和前端语言的区别：

• 运行环境：后端语言一般运行在服务器端，前端语言运行在客户端的浏览器上

• 功能：后端语言可以操作文件，可以读写数据库，前端语言不能操作文件，不能读写数据库。

我们一般安装LTS(长线支持版本)：

下载地址：https://nodejs.org/en/download/

​ 下载之后双击安装，一路点击下一步就可以了。

node.js的版本有两大分支：

官方发布的node.js版本：0.xx.xx 这种版本号就是官方发布的版本
社区发布的node.js版本：xx.xx.x  就是社区开发的版本

Node.js如果安装成功，可以查看Node.js的版本,在终端输入如下命令：

node -v
npm -v   # pip

在安装node.js完成后，在node.js中会同时帮我们安装一个npm包管理器npm。我们可以借助npm命令来安装node.js的包。这个工具相当于python的pip管理器。

2.2 npm常用命令

npm install -g 包名              # 安装模块   -g表示全局安装，如果没有-g，则表示在当前项目安装
npm list                        # 查看当前目录下已安装的node包
npm view 包名 engines            # 查看包所依赖的Node的版本 
npm outdated                    # 检查包是否已经过时，命令会列出所有已过时的包
npm update 包名                  # 更新node包
npm uninstall 包名               # 卸载node包
npm 命令 -h                      # 查看指定命令的帮助文档

//临时使用
npm install jquery --registry https://registry.npm.taobao.org

//可以把这个选型配置到文件中，这样不用每一次都很麻烦
npm config set registry https://registry.npm.taobao.org

//验证是否配置成功 
npm config list 或者 npm config get registry

2.2 安装部署

$ mkdir rtPro      # 项目rtPro
$ cd rtPro
$ npm create umi
# Choose ant-design-pro:
 Select the boilerplate type (Use arrow keys)
❯ ant-design-pro  - Create project with an layout-only ant-design-pro boilerplate, use together with umi block.
  app             - Create project with a simple boilerplate, support typescript.
  block           - Create a umi block.
  library         - Create a library with umi.
  plugin          - Create a umi plugin.

2.3 启动demo

$ git init
$ npm install
$ npm start         # visit http://localhost:8000

• http://localhost:8000/