Ant Design Pro(5)-1.入门

Ant Design Pro(5)

一.简介

Ant Design Pro 是基于 Ant Design 和 umi 的封装的一整套企业级中后台前端/设计解决方案，致力于在设计规范和基础组件的基础上，继续向上构建，提炼出典型模板/业务组件/配套设计资源，进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。随着『设计者』的不断反馈，我们将持续迭代，逐步沉淀和总结出更多设计模式和相应的代码实现，阐述中后台产品模板/组件/业务场景的最佳实践，也十分期待你的参与和共建。

二. 新手需知

1. Ant Design Pro 的架构

学习 Ant Design Pro之前，首先要了解一下架构中的东西

2.相关知识

web 技术

web 技术是指通过 JavaScript，HTML，css 来构建网站的技术，mdn 提供了相当方便的文档来帮助我们学习这些知识。

Node.js 前端开发基础环境

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时，Node.js 的出现极大的推动了
javascript 的工程化。Node.js 已经是当前前端开发的基础环境，也是任何工作流开始的地方。

Webpack 前端必学必会的打包工具

Webpack 可以帮助我们完成一些任务。比如 js 压缩、css 压缩、编译模板文件等等，从而减少前端的工作量。当然，Webpack功能很强大，能帮我们完成的工作远远不止这些。如果我们使用 umi 可以极大的简化 webpack 的配置，但是仍然推荐了解一下基础知识，方便 debug 和 自定义一些配置。

React Router 路由库

React Router 是一个基于 React 之上的强大路由库，它可以让你向应用中快速地添加视图和数据流，同时保持页面与 URL间的同步。 React Router 可以把 location 转化成一个 state，帮助我们管理路由相关的所有状态。

proxy 反向代理工具

随着开发越来越偏向的前后端分离，我们在开发中不可避免地会碰到跨域的问题。proxy 就可以完美反向代理的问题，作为 webpack-dev-server 的主打功能之一， proxy 可以帮助我们代理到任何服务器，解决开发中碰到的跨域问题。

dva 轻量级的应用框架

dva 首先是一个基于 redux 和 redux-saga 的数据流方案，然后为了简化开发体验，dva 还额外内置了 react-router 和 fetch，所以也可以理解为一个轻量级的应用框架。

fabric 严格但是不严苛的 lint 规则集

pro 内置了 fabric 作为了编码规范，fabric 提供了严格但是不严苛的 lint 规则集，包含eslint，stylelint，prettier 三种工具，可以显著的提升代码质量，规范代码风格。

TypeScript 带类型的 JavaScript

TypeScript 是 javascript 的超集，TypeScript 不仅包含 JavaScript的语法，同时还提供了静态类型检查和更完善的代码提示功能。任何现有的 JavaScript 程序都是合法的 TypeScript程序，只需要简单的学习，就可以获得更佳的开发体验。

Ant Design 前端组件库

Ant Design 是一套企业级 UI 设计语言和 React
组件库。作为西湖区最好的组件库，它极大的提升了中后台开发的效率，广受国内外开发者的喜爱。

Ant Design Chart简单好用的 React 图表库

Ant Design Charts 是开箱即用、易于配置、具有良好视觉和交互体验的通用统计图表库，基于 g2的高交互可视化图形语法的同时预设了配置，一个组件即可实现多种复杂的图表

ProComponents 模板组件

ProComponents 相比于 Ant Design 更加标准化，作为模板组件一个组件就可以搭建一个页面，在牺牲部分自由度的情况下， 让CRUD 的效率百倍提升。如果你的项目中表格和表单占主导，那么推荐使用 ProComponents 来完成开发。

useModel 简易数据流

简易数据流一种基于 hooks 范式的简易数据管理方案（部分场景可以取代dva），通常用于中台项目的全局共享数据。在中后台开发中我们往往不需要共享很多数据，只需要用户信息或者后端下发的部分数据，简易数据流和初始化数据即可解决百分之 90 的场景，使用起来成本更低，更加自然。

运行时和编译时

Pro 的底座基于 umi， umi 与 webpack 相比增加了运行时相关的能力，我们在开发中有时候可能难以区分。

编译时指的是代码在编译的时候做的事情，这个阶段的环境一般是 node 环境，可以使用 fs，path 等功能。但是同时因为没有使用webpack ，所以 jsx，引入图片等非 node 的能力是无法使用的。
运行时是指代码已经编译完成开始运行的阶段，这个阶段一般是浏览器环境，不能使用 fs，path 等功能，访问 url也会有跨域的问题，但是这个环境被 webpack 编译过，所以可以写 jsx，导入图片等功能。以上两个环境用起来容易混淆，这里有一个简单的版本，src 文件夹中都是运行时的代码，都会经过 webpack 编译。其他目录的都可以认为是编译时，可以使用 node 能力。这也是为什么我们不能在 config.ts 里面写 JSX 的原因

Umi 的插件

Pro 的底座是 umi，umi 是一个 webpack 之上的整合工具。 umi 相比于 webpack
增加了运行时的能力，同时帮助我们配置了很多 webpack 的预设。也减少了 webpack 升级导致的问题。这也是我们能提供插件的原因。

• plugin-access 权限管理
• plugin-analytics 统计管理
• plugin-antd 整合 antd UI 组件
• plugin-initial-state 初始化数据管理
• plugin-layout 配置启用 ant-design-pro 的布局
• plugin-locale 国际化能力
• plugin-model 基于 hooks 的简易数据流
• plugin-request 基于 umi-request 和 umi-hooks 的请求方案

如果不喜欢 umi默认的配置，可以在这里看看有没有你喜欢的配置。如果还是不能满足就要自定义 webpack 了，chainWebpack 可以自定义内置的 webpack 配置。

三. 基础使用

1.安装Node.js

Node.js前端开发基础环境,首先要确保电脑本地有Node.js.
Node.js 是一个基于 Chrome V8 引擎的JavaScript 运行时，Node.js 的出现极大的推动了 javascript 的工程化。Node.js已经是当前前端开发的基础环境，也是任何工作流开始的地方。

1.如何解决下载Node.js安装包慢的问题？

在这个网站下载安装包： http://nodejs.cn/download/

2.如何解决Node.js下载慢的问题？

在使用npm下载包的时候，默认从国外的https://registry.npmjs.org/服务器下载，此时，网络数据传输需要经过漫长的海底光缆，因此下包速度会很慢

解决办法：

1.查看下包镜像源 npm config get registry

C:\Users\issuser>npm config get registry
https://registry.npmjs.org/

C:\Users\issuser>

2. 把下包的镜像源切换为淘宝镜像源 npm config set registry=https://registry.npm.taobao.org/

C:\Users\issuser>npm config set registry=https://registry.npm.taobao.org/

C:\Users\issuser>
C:\Users\issuser>npm config get registry
https://registry.npm.taobao.org/

C:\Users\issuser>

2.如何解决下载Node.js安装包慢的问题？

2.创建项目

1. 使用脚手架创建

$ npm i @ant-design/pro-cli -g
$ pro create my-app


$ cd my-app
$ yarn
$ yarn start # 打开浏览器访问 http://localhost:8000

2. 使用初始化项目

在官网底部下载初始化项目安装包

3.项目目录

我们已经为你生成了一个完整的开发框架，提供了涵盖中后台开发的各类功能和坑位，下面是整个项目的目录结构。

页面代码结构推荐

所有路由组件（会配置在路由配置中的组件）我们推荐以大驼峰命名打平到 pages 下面第一级（复杂的项目可以增加 group 层级，在
group 下放置 pages）。不建议在路由组件内部再嵌套路由组件 -
不方便分辨一个组件是否是路由组件，而且不方便快速从全局定位到路由组件。

我们推荐尽可能的拆分路由组件为更细粒度的组件，对于多个页面可能会用到的组件我们推荐放到 src/components
中，对于只是被单个页面依赖的（区块）组件，我们推荐就近维护到路由组件文件夹下即可。

4.启动项目

下载项目依赖 npm install

启动项目 npm run start

此时访问 http://localhost:8000/ 即可看到下面的界面。