umi快速上手笔记

1.安装基本环境

• step.1 安装node及npm(npm自带安装)
  node版本需要8.10以上
• step.2 安装cnpm
• step.3 安装yarn，使用yarn管理npm依赖

$ cnpm i yarn tyarn -g
# tyarn为国内源

2.安装umi

• step.1 全局部安装umi

$ tyarn global add umi

如出现umi:command not found，则需要将yarn global bin 路径配置到环境变量中

# ubuntu系统
# 将export PATH="$PATH:`yarn global bin` 写到~/.bashrc 中
$ echo 'export PATH="$PATH:`yarn global bin`"' >> ~/.bashrc 
# 或者直接打开 ~/.bashrc，在文件后追加 export PATH="$PATH:`yarn global bin`
# end========================

# windows系统
# 获取global bin的路径
$ yarn global bin
C:\Users\bb\AppData\Local\Yarn\bin
# 复制到系统环境变量PATH中
# 关闭当前cmd，重启打开cmd，查看umi版本
$ umi -v
2.9.4

3. 通过脚手架创建项目

• step.1 使用tyarn create umi 或 cnpm create umi

$ tyarn create umi

选择project

? 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来创建项目

选择Typescript，是否需要TS或JS

? Which language do you want to use? JavaScript

这里选择了JavaScript

项目创建完成

> git clone https://github.com/ant-design/ant-design-pro --depth=1 E:\bing_study\react_project\umi_andt
> [Sylvanas] Prepare js environment...
> [JS] Clean up...
> Clean up...
✨ File Generate Done

step.2 安装项目

# 安装package.json中声明的依赖
$ yarn

# 启动站点，本质是使用`$ umi dev` 命令
$ yarn start

step.3 浏览器输入localhost:8000，正常访问

3.umi基本的使用开发

3.1 路由

3.2 如何实现页转跳

1. 声明式(umi/link)，即使用标签，在页面中进行转跳，类似H5的标签

import Link from 'umi/link'

export default ()=>(<Link to="/users"></link>);

3. 命令式(‘umi/router’)，在程序用中使用转跳

import Link from 'umi/router'

function gotoPage(){
	router.push('/users');
}

3.3 使用mock模拟后端数据

1. mock文件下所有js，或pages下所所有_mock.js文件，格式如下

export default {
  // 支持值为 Object 和 Array
  'GET /api/users': { users: [1, 2] },

  // GET POST 可省略
  '/api/users/1': { id: 1 },

  // 支持自定义函数，API 参考 express@4
  'POST /api/users/create': (req, res) => { res.end('OK'); },
};

2. 实现mock的延时请求

export default {
	'POST /api/users/create': (req, res) => { 
		setTimeout(() => {res.end('OK');},1000);
	 },
 }

3.4 使用npx快速创建页面

安装npx $ tyarn global add npx
创建面端

$ npx umi g page products