Hello World

--- theme: channing-cyan highlight: a11y-dark --- 官网： # 开发环境第一步，安装`nvm` ``` % sudo curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash % nvm -v 0.39.1 ``` 第二步，安装`Node.js` ``` % nvm install 16 % nvm use 16 % node -v v16.20.0 ``` 第三步，安装`pnpm`。Umi.js推荐使用pnpm来管理依赖 ``` % curl -fsSL https://get.pnpm.io/install.sh | sh - % pnpm -v 8.1.0 ``` # 运行脚手架第一步，创建空目录 ``` % mkdir myapp % cd myapp ``` 第二步，通过官方工具创建项目这个命令会安装 **create-umi** 脚手架并自动运行。国内建议选 pnpm + taobao 源，速度提升明显。这一步会自动安装依赖，同时安装成功后会自动执行 umi setup 做一些文件预处理等工作。 ``` % pnpm dlx create-umi@latest 过程中： ○ Pick Umi App Template │ Simple App ○ Pick Npm Client │ pnpm ○ Pick Npm Registry │ taobao 成功后显示：Done in 14.9s ``` 第三步，`pnpm dev`启动项目 ``` % pnpm dev App listening at: > Local: http://localhost:8000 ``` 第四步，在浏览器里打开 [http://localhost:8000/](http://localhost:8000/) 能看到欢迎界面 # 目录结构项目开发过程中，请按如下官方推荐的目录结构进行开发 ``` . ├── config │ └── config.ts // 【配置文件】 ├── dist // 执行umi build后产物的默认输出文件夹 ├── mock │ └── app.ts｜tsx // mock文件 ├── src │ ├── .umi // dev时的临时文件目录，比如入口文件、路由等 │ ├── .umi-production // build 时的临时文件目录，比如入口文件、路由等 │ ├── layouts // 全局布局，默认会在所有路由下生效 │ │ ├── BasicLayout.tsx │ │ ├── index.less │ ├── models │ │ ├── global.ts │ │ └── index.ts │ ├── pages // 页面 │ │ ├── index.less │ │ └── index.tsx │ ├── utils // 推荐目录 │ │ └── index.ts │ ├── services // 推荐目录 │ │ └── api.ts │ ├── app.(ts|tsx) // 运行时配置文件 │ ├── global.ts // 全局前置脚本文件 │ ├── global.(css|less|sass|scss) // 全局样式文件 │ ├── overrides.(css|less|sass|scss) // 高优先级全局样式文件 │ ├── favicon.(ico|gif|png|jpg|jpeg|svg|avif|webp) // 站点favicon图标文件 │ └── loading.(tsx|jsx) // 全局加载组件 ├── node_modules │ └── .cache │ ├── bundler-webpack │ ├── mfsu │ └── mfsu-deps ├── .env // 【环境变量】 ├── plugin.ts // 项目级 Umi 插件 ├── .umirc.ts // 【配置文件】与config/config.ts文件二选一 ├── package.json ├── tsconfig.json └── typings.d.ts ``` ## .umirc.ts 注意：此文件与config/config.ts文件功能相同，2选1 。且.umirc.ts文件优先级较高配置文件，包含Umi所有非运行时配置（运行时配置一般定义于app.ts） ## public目录存放固定的静态资源，如存放public/image.png，则开发时可以通过/image.png访问到，构建后会被拷贝到输出文件夹 ``` 对于svg资源： import SmileUrl, { ReactComponent as SvgSmile } from './smile.svg'; // 对于图片等资源： import imgUrl from './image.png' //

> ``` ## src目录/app.[ts｜tsx] 运行时配置文件，可以在这里扩展运行时的能力，比如修改路由、修改render方法等 ## src目录/layouts/index.tsx 全局布局，默认会在所有路由下生效，比如有以下路由关系： ``` [ { path: '/', component: '@/pages/index' }, { path: '/users', component: '@/pages/users' }, ] ``` 输出为： ``` index users ``` 当需要关闭layout时可以使用`layout: false`，当需要更多层layout时，可以考虑使用`wrappers`，仅在配置式路由可用： ``` routes: [ { path: '/', component: './index', layout: false }, { path: '/users', component: './users', wrappers: ['@/wrappers/auth'] } ] ``` ## src目录/pages目录 **约定式路由默认以 pages/ 文件夹的文件层级结构来生成路由表**。 **在配置式路由中，component若写为相对路径，将从该文件夹为起点开始寻找文件：** ``` routes: [ // `./index` === `@/pages/index` { path: '/', component: './index' } ] ``` ### 基础路由 ``` 假设 pages 目录结构如下： + pages/ + users/ - index.tsx - index.tsx ``` 会自动生成路由配置如下： ``` [ { path: '/', component: '@/pages/index.tsx' }, { path: '/users/', component: '@/pages/users/index.tsx' }, ] ``` ### 动态路由 **约定带 \$ 前缀的目录或文件为动态路由。若 $ 后不指定参数名，则代表 \* 通配** ``` 比如以下目录结构： + pages/ + foo/ - $slug.tsx + $bar/ - $.tsx - index.tsx ``` 会生成路由配置如下： ``` [ { path: '/', component: '@/pages/index.tsx' }, { path: '/foo/:slug', component: '@/pages/foo/$slug.tsx' }, { path: '/:bar/*', component: '@/pages/$bar/$.tsx' }, ] ``` ### pages/404.tsx 在使用约定式路由时，该文件会自动被注册为全局 404 的 fallback 页面。若使用配置式路由，需要自行配置兜底路由到路由表最后一个： ``` routes: [ // other routes ... { path: '/*', component: '@/pages/404.tsx' } ] ``` # 路由 Umi中应用是单页应用，页面地址的跳转都是在浏览器端完成的，不会重新请求服务端获取 html，html 只在应用初始化时加载一次。所有页面由不同的组件构成，页面的切换其实就是不同组件的切换，只需要在配置中把不同的路由路径和对应的组件关联上。 ## 配置路由在配置文件中通过 routes 进行配置，格式为路由信息的数组。（Umi4默认按页拆包，从而有更快的页面加载速度，由于加载过程是异步的，所以需要编写 loading.tsx 来给项目添加加载样式，提升体验） ``` // .umirc.ts export default { routes: [ { path: '/', component: 'index' }, { path: '/user', component: 'user' }, ], } ``` ### path **String类型。path只支持两种占位符配置，第一种是动态参数 :id 的形式，第二种是 \*通配符，通配符只能出现路由字符串的最后。** 如： ``` /groups /groups/admin /users/:id /users/:id/messages /files/* /files/:id/* ``` ### component 配置location和path匹配后用于渲染的**React组件路径**。可以是绝对路径，也可以是相对路径，如果是相对路径，会从src/pages开始寻找。如果指向src目录的文件，可以用 **@** ，比如 component: '@/layouts/basic'，推荐使用@组织路由文件位置。 ### routes 配置子路由，通常在需要为多个路径增加layout组件时使用 ``` export default { routes: [ { path: '/login', component: 'login' }, { path: '/', component: '@/layouts/index', routes: [ { path: '/list', component: 'list' }, { path: '/admin', component: 'admin' }, ], }, ], } ``` **在全局布局 src/layouts/index 中，通过 \ 来渲染子路由：** ``` import { Outlet } from 'umi' export default function Page() { return (

) } ``` 这样，访问 /list 和 /admin 就会带上 src/layouts/index 这个layout组件 ### redirect 配置路由跳转。如下访问 / 会跳转到 /list，并由 src/pages/list 文件进行渲染 ``` export default { routes: [ { path: '/', redirect: '/list' }, { path: '/list', component: 'list' }, ], } ``` ### wrappers 配置路由组件的包装组件，通过包装组件可以为当前的路由组件组合进更多的功能。比如，可以用于路由级别的权限校验 ``` export default { routes: [ { path: '/user', component: 'user', wrappers: [ '@/wrappers/auth', ], }, { path: '/login', component: 'login' }, ] } ``` 然后在 src/wrappers/auth 中进行权限判断。访问 /user，就通过 auth 组件做权限校验，如果通过，渲染 src/pages/user，否则跳转到 /login。 ``` import { Navigate, Outlet } from 'umi' export default (props) => { const { isLogin } = useAuth(); if (isLogin) { return ; } else{ return ; } } ``` ## 约定式路由除配置式路由外，Umi也支持约定式路由。约定式路由也叫文件路由，就是不需要手写配置，文件系统即路由，通过目录和文件及其命名分析出路由配置。**如果没有routes配置，Umi会进入约定式路由模式，然后分析src/pages 目录拿到路由配置。** 如： ``` . └── pages ├── index.tsx └── users.tsx 会得到以下路由配置： [ { path: '/', component: '@/pages/index' }, { path: '/users', component: '@/pages/users' }, ] ``` ### 动态路由约定，带 \$ 前缀的目录或文件为动态路由。若 \$ 后不指定参数名，则代表 \* 通配，比如以下目录结构： ``` src/pages/users/$id.tsx 会成为 /users/:id src/pages/users/$id/settings.tsx 会成为 /users/:id/settings ``` ``` + pages/ + foo/ - $slug.tsx + $bar/ - $.tsx - index.tsx 会生成路由配置如下： [ { path: '/', component: '@/pages/index.tsx' }, { path: '/foo/:slug', component: '@/pages/foo/$slug.tsx' }, { path: '/:bar/*', component: '@/pages/$bar/$.tsx' }, ]; ``` ### 全局layout 约定 **src/layouts/index.tsx 为全局路由**。返回一个 React 组件，并通过 \ 渲染嵌套路由。 ``` . └── src ├── layouts │ └── index.tsx └── pages ├── index.tsx └── users.tsx 会生成如下路由： [ { path: '/', component: '@/layouts/index', routes: [ { path: '', component: '@/pages/index' }, { path: 'users', component: '@/pages/users' }, ], }, ] ``` 可以通过 **layout: false** 来细粒度关闭某个路由的全局布局显示，该选项只在一级生效： ``` routes: [ { path: '/', component: './index', // OK layout: false }, { path: '/users', routes: [ // 不生效，此时该路由的 layout 并不是全局布局，而是 `/users` { layout: false } ] } ] ``` 一个自定义的全局layout格式如下： ``` import { Outlet } from 'umi' export default function Layout() { return } ``` ### 不同的全局layout 如果需要针对不同路由输出不同的全局layout，可以在 src/layouts/index.tsx 中对 location.path 做区分，渲染不同的layout ``` import { useLocation, Outlet } from 'umi'; export default function() { const location = useLocation(); if (location.pathname === '/login') { return } // 使用 `useAppData` / `useSelectedRoutes` 可以获得更多路由信息 // const { clientRoutes } = useAppData() // const routes = useSelectedRoutes() return ( <>