umijs创建react项目真的是开箱即用 超级方便 ; 话不多说 ,开始行动
关于 umi
准备工作
node环境 并确保 node 版本是 10.13 或以上
查看node版本: $ node -v
创建项目目录
mkdir my-react && cd my-react
yarn create @umijs/umi-app
安装项目依赖
yarn install
启动项目
yarn start
基本功能搭建完成!
新建 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 (
<>
<p>HOME</p>
<button
onClick={() => {
history.push('/detail');
}}
>
点击跳转 detail
</button>
</>
);
};
使用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 (
<>
<p className={styles.p_style}>DETAIL</p>
<button onClick={jump}>点击跳转 home</button>
</>
);
};
我们也可以在.umirc.ts把路由配置成hash模式
import { defineConfig } from 'umi';
export default defineConfig({
history: {
type: 'hash'
}
});
访问一下
文件目录
打包 生成的dist文件为打包后内容
yarn build