pnpm dlx create-umi@latest  my-app
? Install the following package: create-umi? (Y/n) · true
? Pick Npm Client ? pnpm
? Pick Npm Registry ? taobao
Write: .gitignore
Write: .npmrc
Write: .umirc.ts
Copy:  layouts/index.tsx
Write: package.json
Copy:  pages/index.tsx
Copy:  pages/users.tsx
Copy:  pages/users/foo.tsx
@ postinstall /private/tmp/sorrycc-vylwuW
umi setup
info  - generate files

//國內(nèi)建議選 pnpm + taobao 源，速度提升明顯。這一步會(huì)自動(dòng)安裝依賴，同時(shí)安裝成功后會(huì)自動(dòng)執(zhí)行 umi setup 做一些文件預(yù)處理等工作。
/*
執(zhí)行之后會(huì)在控制臺(tái)會(huì)出現(xiàn)用戶交互操作，按照提示來操作即可。
第一步是讓你確定項(xiàng)目文件夾的名稱，然后選擇項(xiàng)目的模版。因?yàn)樵赨mi3中是沒有集成一些插件的，很多的插件在項(xiàng)目創(chuàng)建之后在根據(jù)需要進(jìn)行安裝。但是Umi4變得更加方便了，直接在項(xiàng)目中集成插件，然后根據(jù)需要進(jìn)行啟用和關(guān)閉。
*/

pnpm dev
        ╔═════════════════════════════════════════════════════╗
        ║ App listening at:                                   ║
        ║  >   Local: https://127.0.0.1:8000                  ║
ready - ║  > Network: https://192.168.1.1:8000                ║
        ║                                                     ║
        ║ Now you can open browser with the above addresses?? ║
        ╚═════════════════════════════════════════════════════╝
event - compiled successfully in 1121 ms (388 modules)
event - MFSU compiled successfully in 1308 ms (875 modules)

pnpm umi g
? Pick generator type ? Enable Prettier -- Enable Prettier
info  - Write package.json
info  - Write .prettierrc
info  - Write .prettierignore
info  - Install dependencies with pnpm

├── config/              // 配置目錄（核心）
│   └── config.ts        // 主配置文件（支持多環(huán)境配置）
├── dist/                // 構(gòu)建產(chǎn)物目錄（默認(rèn)輸出路徑）
├── mock/                // 模擬數(shù)據(jù)目錄
│   └── app.ts|tsx       // Mock 數(shù)據(jù)定義入口
├── src/                 // 源碼核心目錄（開發(fā)主區(qū)域）
│   ├── .umi/            // 臨時(shí)文件目錄（框架生成，勿手動(dòng)修改）
│   ├── .umi-production/ // 生產(chǎn)環(huán)境臨時(shí)文件（構(gòu)建時(shí)生成）
│   ├── layouts/         // 全局布局目錄（約定式）
│   │   ├── BasicLayout.tsx  // 基礎(chǔ)布局組件
│   │   └── index.less       // 布局樣式
│   ├── pages/           //頁面組件目錄（約定式路由核心）
│   │   ├── index.less   // 頁面樣式
│   │   └── index.tsx    // 頁面組件（自動(dòng)映射為路由）
│   ├── models/          // 數(shù)據(jù)模型目錄（推薦）
│   ├── utils/           // 工具函數(shù)目錄（推薦）
│   ├── services/        //  服務(wù)目錄api接口配置（推薦）
│   ├── app.tsx          // 運(yùn)行時(shí)配置入口（擴(kuò)展生命周期）
│   └── global.less      // 全局樣式覆蓋
└── public/              // 靜態(tài)資源目錄（直接拷貝至構(gòu)建產(chǎn)物）
    └── favicon.ico      // 網(wǎng)站圖標(biāo)（需與配置路徑匹配）

// 示例：全局錯(cuò)誤處理  
export function onError(error: Error) {  
  console.error('全局錯(cuò)誤:', error);  
}  

//?全局?jǐn)?shù)據(jù)共享與狀態(tài)管理?：通過 useModel 實(shí)現(xiàn)跨組件的數(shù)據(jù)共享，替代部分 dva 場景
// src/models/global.tsx  
import { useState } from 'react';  
export default () => {  
  const [globalData, setGlobalData] = useState({});  
  return { globalData, setGlobalData };  
};  

# .env
API_URL=http://api.example.com
NODE_ENV=development

// src/services/api.ts
const BASE_URL = process.env.API_URL;

//啟動(dòng)預(yù)發(fā)布環(huán)境
 UMI_ENV=staging pnpm dev

export default defineConfig({
  define: {
    'process.env.UMI_ENV': process.env.UMI_ENV || 'dev',
    'process.env.API_URL': '"https://prod.example.com"', // 需要轉(zhuǎn)義雙引號
    'process.env.API_SECRET': 'your_key_here'
  }
});

API_URL=http://test.example.com umi build
// 修改端口示例（跨平臺(tái)推薦 cross-env）
cross-env PORT=3000 pnpm dev

export default defineConfig({
  define: {
    'process.env.API_HOST': 'https://staging.api.com'
  },
  proxy: { '/api': { target: 'http://staging.server' } }
});

pages/
├── index.tsx → path: '/'
├── about.tsx → path: '/about'
└── users/
    └── index.tsx → path: '/users'

pages/
└── users/
    ├── index.tsx → path: '/users'
    └── list.tsx → path: '/users/list'

[
  { path: '/users', component: '@/pages/users/index' },
  { path: '/users/list', component: '@/pages/users/list' },
]

pages/
└── users/
    └── [id].tsx → path: '/users/:id'

// /pages/users/[id].jsx
export default (props) => {
  const { id } = props.match.params;  // 訪問 /users/123 時(shí) id=123
  return <div>{id}</div>;
};

//在動(dòng)態(tài)路由定義中，/pages/user/[id$].jsx 表示 id 為可選，訪問 /user 和 /user/123 均可匹配該路由
pages/
└── users/
    └── [id$].tsx → path: '/users/:id?'

pages/
└── users/
    ├── _layout.tsx → 父路由布局
    ├── index.tsx → path: '/users'
    └── detail/[id].tsx → path: '/users/detail/:id'

{
  path: '/users',
  component: '@/pages/users/_layout',
  routes: [
    { path: '/users', component: '@/pages/users/index' },
    { path: '/users/detail/:id', component: '@/pages/users/detail/[id]' },
  ],
}

[
  { exact: false, path: '/', component: '@/layouts/index',
    routes: [
      { exact: true, path: '/', component: '@/pages/index' },
      { exact: true, path: '/users', component: '@/pages/users' },
    ],
  },
]

// /src/layouts/index.jsx
export default ({ children }) => {
  return (
    <div>
      <Header />
      {children}
      <Footer />
    </div>
  );
};

export default function(props) {
  if (props.location.pathname === '/login') {
    return <SimpleLayout>{ props.children }</SimpleLayout>
  }

  return (
    <>
      <Header />
      { props.children }
      <Footer />
    </>
  );
}

// .umirc.ts
export default {
  routes: [
    { path: '/', component: 'index' },
    { path: '/user', component: 'user' },
  ],
}

//這樣，訪問 /list 和 /admin 就會(huì)帶上 src/layouts/index 這個(gè) layout 組件。

export default {
  routes: [
    { path: '/login', component: 'login' },
    {
      path: '/',
      component: '@/layouts/index',
      routes: [
        { path: '/list', component: 'list' },
        { path: '/admin', component: 'admin' },
      ],
    }, 
  ],
}

//訪問 / 會(huì)跳轉(zhuǎn)到 /list 。
export default {
  routes: [
    { path: '/', redirect: '/list' },
    { path: '/list', component: 'list' },
  ],
}

  routes: [
    { path: '/', redirect: '/list', keepQuery: true },

    // 注：若你需在跳轉(zhuǎn)時(shí)處理參數(shù)，可以自行實(shí)現(xiàn)一個(gè)跳轉(zhuǎn)組件
  ]

export default {
  routes: [
    { path: '/user', component: 'user',
      wrappers: [
        '@/wrappers/auth',
      ],
    },
    { path: '/login', component: 'login' },
  ]
}

import { Navigate, Outlet } from 'umi'

export default (props) => {
  const { isLogin } = useAuth();
  if (isLogin) {
    return <Outlet />;
  } else{
    return <Navigate to="/login" />;
  }
}

// .umirc.ts

export default {
  routes: [
    // 取消 login 頁面的全局布局，從而自行實(shí)現(xiàn)整個(gè)頁面
    { path: '/login', component: '@/pages/Login', layout: false },
  ],
}