umijs創(chuàng)建react項目真的是開箱即用 超級方便 镜悉； 話不多說 空凸，開始行動
關于 umi
官網(wǎng)地址：https://umijs.org/docs
準備工作
node環(huán)境 并確保 node 版本是 10.13 或以上
查看node版本: $ node -v
創(chuàng)建項目目錄
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 只在應用初始化時加載一次妻献。所有頁面由不同的組件構成蛛株，頁面的切換其實就是不同組件的切換，你只需要在配置中把不同的路由路徑和對應的組件關聯(lián)上育拨。
除配置式路由外谨履，Umi 也支持約定式路由。約定式路由也叫文件路由熬丧，就是不需要手寫配置笋粟，文件系統(tǒng)即路由，通過目錄和文件及其命名分析出路由配置析蝴。
如果沒有 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 內(nèi)置支持 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文件為打包后內(nèi)容
yarn build
