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 如何实现页转跳
- 声明式(
umi/link
),即使用标签,在页面中进行转跳,类似H5的标签
import Link from 'umi/link'
export default ()=>(<Link to="/users"></link>);
- 命令式(‘umi/router’),在程序用中使用转跳
import Link from 'umi/router'
function gotoPage(){
router.push('/users');
}
3.3 使用mock模拟后端数据
- 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'); },
};
- 实现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