umijs + antd 布局

umijs + antd 布局

一、安装umijs

2. 找个地方建空目录
   mkdir myapp && cd myapp
3. 通过官方工具创建项目
   Yarn create @umijs/umi-app
Copy: .editorconfig Write: .gitignore Copy: .prettierignore Copy: .prettierrc Write: .umirc.ts Copy: mock/.gitkeep Write: package.json Copy: README.md Copy: src/pages/index.less Copy: src/pages/index.tsx Copy: tsconfig.json Copy: typings.d.ts
4. 安装依赖
   yarn
yarn install v1.21.1 [1/4] ???? Resolving packages... success Already up-to-date. ✨ Done in 0.71s.
5. 启动项目
   yarn start
Starting the development server... ✔ Webpack Compiled successfully in 17.84s DONE Compiled successfully in 17842ms 8:06:31 PM App running at: - Local: http://localhost:8000 (copied to clipboard) - Network: http://192.168.12.34:8000
6. 浏览器打开localhost:8000
   

二、实现antd-pro布局

2. umijs配置

Umi 在 .umirc.ts 或 config/config.ts 中配置项目和插件，支持 es6。推荐两种配置方式二选一，.umirc.ts 优先级更高。

1. 
   
2. config/config.ts文件
   antd-design-pro-layout
   import { defineConfig } from 'umi'; import routes from './routes'; export default defineConfig({ layout: { name: 'Ant Design Pro', logo: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg', // copy from pro site navTheme: 'dark', // Navigation menu theme primaryColor: '#1890ff', // Primary color of ant design layout: 'sidemenu', // Layout menu mode, side: right navigation, top: top navigation contentWidth: 'Fluid', // Content mode of layout, Fluid: fixed width 1200px, Fixed: adaptive fixedHeader: true, // Whether to fix header to top fixSiderbar: true, // Whether to fix navigation menu title: 'Mr.Yao', pwa: false, iconfontUrl: '' }, routes: routes })
3. config/routes.tx
export default [ { path: '/lover', component: '@/pages/lover', menu: { name: 'lover', icon: 'MenuFoldOutlined', flatMenu: false, hideInMenu: false, hideChildrenInMenu: false, }, } ];
4. 创建src/lover/index.tsx
import styles from './index.less'; export default function IndexPage() { return ( <div> <h1 className={styles.title}>Page index</h1> </div> ); }
5. 效果