umi入门学习

 umi为前端开发框架

官网

1.安装umi

npm install umi -g

直接创建文件夹 umiProject，cd进入后直接操作：

创建页面

umi g page index

启动服务器

umi dev

项目启动后，目录结构如下：

 运行后：

内部样式使用均为导入css文件，使用styles.类名进行访问，在添加样式时，采用类样式添加。

路由是自动配置的，如果需要嵌套路由什么的，可以直接加文件夹进行嵌套

具体路由配置也可以在.umi的route.js文件内实现

动态路由

以[id$]开头的文件或目录  

如下图：

[id$].js文件

import styles from './[id$].css'

export default function Page(props) {
  return (
    <div>
      <h1 className={styles.title}>
        <h1>Page user</h1>
        <p>{props.match.params.id}</p>
      </h1>
    </div>
  );
}

[id$].css文件

.title {
  background: rgb(222, 154, 242);
}

访问路由不需要配置，直接修改访问路径即可

2.路由跳转方式

两种方式：1.命令  2.link

先查看实例文件

 _layout.js是作为users的默认路由，嵌套在其他路由的外层

示例如下：

点击tom之后：

 这些都不重要，重点在于点击然后页面跳转。

这个是users下的index.js文件

// 这个是初始化页面
import React from 'react';
import styles from './index.css';
import {Link, history} from 'umi';
 
export default function Page() {
  const users = [{id: 1,name: "tom"}]
  return (
    <div className={styles.title}>
      <h1>Page users list</h1>
      <ul>
        {/* 两种跳转方式 */}
        {/* 方式1 */}
        {/* {users.map(users=><li key={users.id}>
          <Link to={`/users/${users.id}`}>{users.name}</Link>
        </li>)} */}
        
        {/* 方式2 */}
        {users.map(users=><li key={users.id} 
        onClick={()=> history.push(`/users/${users.id}`)}>{users.name}</li>)}
      </ul>
    </div>
  );
}

3.配置式路由

在根目录添加config/config.js文件

// 添加配置文件后约定的路由失效
export default {
  routes: [
    {path : "/", component: "./index"}, //路径相对于pages
    {
      path: "/users",
      component: "./users/_layout",
      routes: [
        { path: "/users", component: "./users/index"},
        { path: "/users/:id", component: "./users/[id$]"},
      ]
    }
  ]
}

4.路由守卫

具体实现

在config.js文件内设置about路由守卫：

然后 新建routes/PrivateRoute.js文件

import {Redirect} from "umi";

export default props => {
  // 50%概率
  console.log("Math.random()",Math.random());
  if(Math.random() > 0.5){
    return <Redirect to="/login"/>
  }
  return (
    <div>
      {props.children}
    </div>
  )
}

上述代码表示：可能登录成功，成功进入about，不成功 重定向到login页

新建个login文件，文件目录如下：

5.使用antd

 安装antd

npm install antd -S

添加 @umijs/preset-react --dev ：（这个需要在管理员操作内安装）

yarn add @umijs/preset-react --dev

安装完成后直接使用：

import {Button} from 'antd';


<Button type="primary">登录</Button>