umijs创建react项目

umijs创建react项目真的是开箱即用 超级方便 ； 话不多说 ，开始行动

关于 umi

官网地址：https://umijs.org/docs

准备工作

node环境 并确保 node 版本是 10.13 或以上
查看node版本: $ node -v

image.png

创建项目目录

mkdir my-react && cd my-react

image.png

yarn create @umijs/umi-app

image.png

安装项目依赖

yarn install

image.png

启动项目

yarn start

image.png

基本功能搭建完成！

新建 home 和 detail 页面

$ mkdir home && cd home

$ touch index.tsx

$ touch index.less

$ mkdir detail && cd detail

$ touch index.tsx

$ touch index.less

使用 umi 约定式路由 添加路由跳转功能

在 Umi 中，应用都是单页应用，页面地址的跳转都是在浏览器端完成的，不会重新请求服务端获取 html，html 只在应用初始化时加载一次。所有页面由不同的组件构成，页面的切换其实就是不同组件的切换，你只需要在配置中把不同的路由路径和对应的组件关联上。

除配置式路由外，Umi 也支持约定式路由。约定式路由也叫文件路由，就是不需要手写配置，文件系统即路由，通过目录和文件及其命名分析出路由配置。
如果没有 routes 配置，Umi 会进入约定式路由模式，然后分析 src/pages 目录拿到路由配置。

home/index.tsx

import React from 'react';
import { history } from 'umi';

export default () => {
  return (
    <>
      
HOME
       {
          history.push('/detail');
        }}
      >
        点击跳转 detail
      
    
  );
};

使用css less

Umi 会自动识别 CSS Modules 的使用，你把他当做 CSS Modules 用时才是 CSS Modules。
Umi 内置支持 less，不支持 sass 和 stylus，但如果有需求，可以通过 chainWebpack 配置或者 umi 插件的形式支持。

我们给detail页面添加样式
detail/index.less

.p_style{
    margin: 30px;
    color:pink;
}

detail/index.tsx

import React from 'react';
import { history } from 'umi';
import styles from './index.less';

export default () => {
  const jump = () => {
    history.push('/home');
  };
  return (
    <>
      
DETAIL
      点击跳转 home
    
  );
};

我们也可以在.umirc.ts把路由配置成hash模式

import { defineConfig } from 'umi';

export default defineConfig({
  history: {
    type: 'hash'
  }
});

访问一下

http://localhost:8000

image.png

image.png

文件目录

image.png

打包 生成的dist文件为打包后内容

yarn build

image.png

image.png