一、过程安装

其中安装成功后出现404参考第二个大导航

所有都需要安装最新版本的

包括装node（node 10.13.0，自带npm 版本6.4.1 ）、yarn、和 git（建议最新版本，否则会出很多问题）

node最新版本出了很多问题，最后用了node 10.13.0

下面为ant design pro 官网安装

https://pro.ant.design/docs/getting-started-cn

安装#

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

yarn create umi (本地采用，无问题)

npm create umi

选择 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.

Ant Design Pro 脚手架将会自动安装。

目录结构#

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

├── config                   # umi 配置，包含路由，构建等配置
├── mock                     # 本地模拟数据
├── public
│   └── favicon.png          # Favicon
├── src
│   ├── assets               # 本地静态资源
│   ├── components           # 业务通用组件
│   ├── e2e                  # 集成测试用例
│   ├── layouts              # 通用布局
│   ├── models               # 全局 dva model
│   ├── pages                # 业务页面入口和常用模板
│   ├── services             # 后台接口服务
│   ├── utils                # 工具库
│   ├── locales              # 国际化资源
│   ├── global.less          # 全局样式
│   └── global.ts            # 全局 JS
├── tests                    # 测试工具
├── README.md
└── package.json

本地开发#

安装依赖。

安装淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

之后cnpm install 安装依赖

之后启动 cnpm start

运行

http://localhost:8000/ 即可成功

基于 block 开发，快速构建标准页面

npx umi block list

获取全部区块

 npm run fetch:blocks

1. npm安装模块

【npm install xxx】利用 npm 安装xxx模块到当前命令行所在目录；
【npm install -g xxx】利用npm安装全局模块xxx；

2. 本地安装

本地安装时将模块写入package.json中：

【npm install xxx】安装但不写入package.json；
【npm install xxx --save】安装并写入package.json的"dependencies"中；
【npm install xxx --save-dev】安装并写入package.json的"devDependencies"中。

3. npm 删除模块

【npm uninstall xxx】删除xxx模块；
【npm uninstall -g xxx】删除全局模块xxx；

4 less-loader 采用yarn安装（npm 和cnpm安装不上）

或者 yarn命令如下：
yarn add less less-loader --dev

5 清缓存

npm cache clean --force

二、新建页面出现404

参考DerrickTel的博客，网址：https://blog.csdn.net/cuandeqin2083/article/details/88421521

主要因为在config.js中，路由一定要写在404之前，例如/new 和/test，一定要在404之前，否则会一直出现404的问题

{
path: '/',
component: '../layouts/SecurityLayout',
routes: [
{
path: '/',
component: '../layouts/BasicLayout',
authority: ['admin', 'user'],
routes: [
{
path: '/',
redirect: '/welcome',
},

{
path: '/new',
name: '新界面',
icon: 'smile',
component: './NewPage',

},
{
path: '/test',
name: 'test',
icon: 'dashboard',
routes: [{
path: '/test/page1',
name: 'page1',
component: './Test/Page1',
}],
},
{
component: './404',
},
],
},
{
component: './404',
},
],
},

三、配置外部接口调用路由

config.js中序在最后配置

proxy: {
'/api/': {
target: 'http://localhost:8080/',
changeOrigin: true,
pathRewrite: { '^/api': '' },
},
},

请求界面为：

export async function query() {
return request('/api/employee/list')
}
即实际请求的为：http://localhost:8080/employee/list

四、数据接收

http://localhost:8080/employee/list

数据为：

{
"code": 200,
"message": "操作成功",
"data": {
"pageNum": 1,
"pageSize": 10,
"totalPage": 1,
"total": 1,
"list": [
{
"id": 59,
"name": "张三",
"company": "公司1",
"position": "工程师",
"status": "1",
"status1": 1
}
]
}
}

通过query方法获取数据后，yield put中的type会调用了reducers 里的一个方法，这个方法里去修改state，然后数据改变之后页面应该就会自动渲染了。

model.js中为：

。。。

reducers: {
saveList(state, { payload }) {
// state.list = payload.data.list
state.list = payload
},

之后具体的index.js界面：

@connect(({ employee, loading }) => ({

list: employee.list,
loading: loading.models.employee,
}))
class List extends React.Component {
columns = [
{
title: '姓名',
dataIndex: 'name',
render(text, record) {
debugger
return <Link to={`/employee/${record.id}`}>{text}</Link>
},
},
{
title: '公司',
dataIndex: 'company',

render(text) {
return text
},
},

五、新增用户后取消抛出错误

只需要在resetCurrent 中添加 return state; 即可

Error: Given action "employee/resetCurrent", reducer "employee" returned undefined. To ignore an action, you must explicitly return the previous state. If you want this reducer to hold no value, you can return null instead of undefined.

reducers: {
saveList(state, { payload }) {
// state.list = payload.data.list
state.list = payload
},
......
resetCurrent(state) {
state.current = {}
return state;
}
},

ant design pro安装相关推荐

【Ant Design Pro 一】环境搭建，创建一个demo
技术交流qq群 173683895 搭建 Ant Design Pro 的前期准备:你的本地环境需要安装 cnpm.node. 注:代码块中的 $ 代表: $后面是在命令行输入的命令,举例 $ ...
Ant Design Pro的使用
Ant Design Pro的使用初始化: 开始使用 - Ant Design Pro 安装:npm install -g yarn 查看版本 :>yarn --version (并行下载) ...
ant design pro（一）安装、目录结构、项目加载启动【原始、以及idea开发】
一.概述 1.1.脚手架概念编程领域中的"脚手架(Scaffolding)"指的是能够快速搭建项目"骨架"的一类工具.例如大多数的React项目都有src,p ...
Ant Design Pro+Electron+electron-builder实现React应用脱离浏览器，桌面安装运行
学习参考: electron-api-demos 我以下的方式,其实并把Ant Design Pro文件打包到生成的安装包里,所以,安装包=Ant Design Pro+Electron环境 ant- ...
Ant Design Pro入门之部署安装
部署安装下载地址:https://github.com/ant-design/ant-design-pro 我们使用资料中提供的,已经下载好的文件:ant-design-pro-master.zip ...
体验ANT DESIGN PRO V5--项目创建并安装umi气泡工作台
ant design pro V5版beta版发布了,距离上次使用ant design pro已经过去两年,看到V587的新版本发布便迫不及待的再来体验下.首先按照官方文档创建项目,项目创建流程如下: ...
ant design pro模板_Ant Design Pro入门教程，安装，运行（V5 Typescript版）
[前言] 找了很多Admin模板,最后还是看中了AntDesignPro这个阿里巴巴开源的Admin框架,长这样(还行吧,目前挺主流的): 该套模板是使用了React开发框架作为基础,AntDesig ...
Ant Design Pro入门教程安装框架
介绍一下Ant Design Pro,说白了就是基于React的一套脚手架,UI是 Ant Design ,框架是 Ant Design Pro 脚手架安装完成,运行起来的样子: 下面我们来看看怎么安 ...
前端UI框架Ant Design Pro 依赖安装
前端UI框架Ant Design Pro 依赖安装最近换了新工作,需要负责全栈开发,项目用到的前端框架是ant design, 蚂蚁金服基于react打造的一个服务于企业级产品的UI框架, 这边简单 ...

ant design pro安装