umi快速上手笔记

左手的ㄟ右手 2024-04-18 23:43 81阅读 0赞

## 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>);

1.  命令式(‘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'); },
    };

1.  实现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