# Antd

你的本地环境需要安装 yarn、node 和 git。
我们的技术栈基于 ES2015+、React、UmiJS、dva、g2 和 antd，提前了解和学习这些知识会非常有帮助。

ant-design-pro	pro-vue
ant-design_ES6

# 安装方式(1)

back

新建一个空的文件夹作为项目目录，并在目录下执行：

yarn create umi

或者

npm create umi

或者

cnpm create umi

国内使用 npm 速度很慢，你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:

`$ npm install -g cnpm --registry=https://registry.npm.taobao.org`
`$ npm config set registry https://registry.npm.taobao.org`

1
2

这样就可以使用 cnpm 命令来安装模块了

# 安装方式(2)

back

`$ git clone --depth=1 https://github.com/ant-design/ant-design-pro.git my-project`
`$ cd my-project`

1
2

# 本地开发

back

安装依赖。

npm install

cnpm install、yarn install
异常 :

Unhandled rejection RangeError: Maximum call stack size exceededill install loadIdealTree
超过最大调用栈问题
给npm降级或者升级

降级： npm install -g npm@5.4.0
升级： npm install -g npm 升级到最新版

Failed to download Chromium r662092!
用淘宝的cnpm 安装，自动使用国内源
无法解析import findRoute from 'D:\Webstorm\ant-desing-pro\node_modules\umi-build-dev\lib\findRoute.js';
斜杠改成这样就可D:/Webstorm/ant-desing-pro/node_modules/umi-build-dev/lib/findRoute.js
operation not permitted, unlink 'D:\study\dva-boot-admin-master\dva-boot-adm
比较粗暴的 npm install -force 解决。

网上流行解决方法：

1、卸载node.js重新安装（可以尝试升级或者降级，或者更改安装目录）；这个我成功搞定
2、删除对应没有权限的文件夹，然后重新install；
3、清除缓存npm cache clean --force；
4、npm install -force；

版本不兼容。
如果网络状况不佳，可以使用 cnpm 进行加速。

npm start

cnpm start

# 路由和菜单

back

路由和菜单是组织起一个应用的关键骨架，pro 中的路由为了方便管理，使用了中心化的方式，在 config.ts 统一配置和管理。

# 基本结构

文件结构

pages：每个路由对应的页面组件文件。主要定义具体页面的基本结构和内容。
services：用于与后台交互、发送请求等。
models：用于组件的数据存储，接收请求返回的数据等。
components：组件文件夹。每个页面可能是由一些组件组成的，对于一些相对通用的组件，建议将该组件写入components文件夹中，并在routes文件夹中的文件引入来使用。
locales :通用国际化文件（每个组件还有自己对应的国际化文件）

在这一部分，脚手架通过结合一些配置文件、基本算法及工具函数，搭建好了路由和菜单的基本框架，主要涉及以下几个模块/功能：

路由管理通过约定的语法根据在 config.ts 中配置路由。
菜单生成根据路由配置来生成菜单。菜单项名称，嵌套路径与路由高度耦合。
面包屑组件 PageHeader 中内置的面包屑也可由脚手架提供的配置信息自动生成。

# 路由

back

目前脚手架中所有的路由都通过 config.ts来统一管理，在 umi 的配置中我们增加了一些参数，如 name，icon，hideChildrenInMenu，authority，来辅助生成菜单。其中：

name 和 icon分别代表生成菜单项的文本和图标。
hideChildrenInMenu 用于隐藏不需要在菜单中展示的子路由。用法可以查看分步表单的配置。
hideInMenu 可以在菜单中不展示这个路由，包括子路由。
authority 用来配置这个路由的权限，如果配置了将会验证当前用户的权限，并决定是否展示。

# 注意的问题

back

配置的路由的根路径需一致

{
      path: '/user',
      component: '../layouts/UserLayout',
      routes: [
        {path:'/user',redirect:'/user/login'},
        {path: '/user/login', name: 'login', component: './user-login',},
      ],
    },

1
2
3
4
5
6
7
8

即上面是path:'/user'，那么下面的子项也必须是'/user'开头

# 菜单

back

菜单根据config.ts生成。

# 常见问题

back

umi命令无法用

yarn global add umi

或者

npm install -g umi
cnpm install -g umi

umi block add

期间可能会安装新的依赖，但是可能是低版本的。所以慎重

package.json的重要性可以看到依赖是否完整

# Model详解

# 使用dva进行数据分层管理

引入dva框架,以下是antdPro 4

const plugins: IPlugin[] = [
  [
    'umi-plugin-react',
    {
      antd: true,
      dva: {
        hmr: true,
      },

1
2
3
4
5
6
7
8

# Dva

back | dva知识地图

易学易用

仅有 6 个 api，对 redux 用户尤其友好，配合 umi 使用后更是降低为 0 API

elm 概念

通过 reducers, effects 和 subscriptions 组织 model，简化 redux 和 redux-saga 引入的概念

插件机制

比如 dva-loading 可以自动处理 loading 状态，不用一遍遍地写 showLoading 和 hideLoading

# 响应式布局

back

xs: '480px',——<576px 响应式
sm: '576px',——≥576px 响应式
md: '768px',——≥768px 响应式
lg: '992px',——≥992px 响应式
xl: '1200px',——≥1200px 响应式
xxl: '1600px',——≥1600px 响应式

# Umi

umiHooks

umi是一款可插拔的企业级react应用框架，支持约定式路由以及各种进阶路由功能，并以此进行功能扩展，拥有完善的插件体系，覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业务需求。

它有以下特性：

开箱即用，内置react，react-router等
约定式路由，同时支持可配置路由
完善的插件体系
支持typescript
支持dva数据方案