umijs + antd 布局

umijs + antd 布局

一、安装umijs

1. 找个地方建空目录

   mkdir myapp && cd myapp

2. 通过官方工具创建项目

   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
   

3. 安装依赖

   yarn

   yarn install v1.21.1
   [1/4] 🔍  Resolving packages...
   success Already up-to-date.
   ✨  Done in 0.71s.
   

4. 启动项目

   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
   

5. 浏览器打开localhost:8000

   

二、实现antd-pro布局

1. umijs配置

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

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. 效果