umi学习笔记

1.安umi yarn global add umi 2.创建项目页面 umi g page home 3启动 umi dev

王者荣耀资料库项目实战 yarn global add @umijs/create-umi-app 新建文件夹下使用命令 create-umi-app 安装依赖 yarn 启动项目 yarn start 目录结构 . ├── mock ├── package.json ├── src │ ├── app.js │ ├── assets │ │ └── yay.jpg │ ├── global.css │ ├── layouts │ │ ├── index.css │ │ └── index.js │ ├── models │ └── pages │ ├── index.css │ └── index.js ├── .env └── .umirc.js

新建页面 import React, { FC } from ‘react’; import styles from ‘./index.less’; import { Layout, Menu } from ‘antd’; const { Header, Content, Footer } = Layout;

function BasicLayout(props) { return ( <Header> <div className={styles.logo}>王者荣耀资料库 </div> <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['1']} style= > 英雄 局内道具 召唤师技能 </Menu> </Header> <Content style=> <div style=> {props.children} </div> </Content> <Footer style=> Umi 入门教程 Created by xiaohuoni </Footer> ); }

export default BasicLayout;

添加页面命令umi g page item –typescript –less

添加三个页面

• Previous
  typeScript的类型元编程
• Next
  前端开发核心知识进阶