umimax创建方式

Umimax

官网资料

Umi Max 简介

第一步先全局安装yarn

npm install-g yarn

**

第二步创建文件夹 cmd进入终端

npx create-umi@latest

运行项目

yarn dev|yarn run dev 两个都可以运行项目//假设遇到了端口被占用yarn dev--port8001//换一个端口就可以解决了

运行到浏览器的默认的效果如下

demo

代码如下：

Account index.tsx

import {Outlet} from '@umijs/max'; const AccessPage: React.FC=()=>{ return( <> <Outlet></Outlet> </> ); } export default AccessPage;

.umirc.ts

import{defineConfig}from'@umijs/max';exportdefaultdefineConfig({antd:{},access:{},model:{},initialState:{},request:{},layout:{title:'@umijs/max',},routes:[{path:'/',redirect:'/login',},{name:'登录页',path:'/login',component:'./Login',layout:false},{name:'首页',path:'/home',component:'./Home',},{name:'账号管理',path:'/account',component:'./Account',routes:[{name:'账号列表',path:'/account/list',component:'./Account/List',},{name:'新增账号',path:'/account/add',component:'./Account/Add',},{name:'个人中心',path:'/account/center',component:'./Account/Center',},{name:'修改密码',path:'/account/edit',component:'./Account/Edit'},]},{path:'/*',component:'@/pages/404',layout:false},//无布局,全屏显示],npmClient:'npm',});

component写的名字 = 实际文件名

图片上的就是文件名字

// 👇 这个叫【组件名】，必须大写！！！ const EditPage = () => { return <div>xxx</div> } export default EditPage

因为 path 是网址，网址必须小写！

component 是文件，跟文件名走！

为什么 component 只写 ./Account，不写 index，却能找到 Account/index.tsx？

Umi 有一个默认规则：遇到文件夹，自动找 index.tsx！

component: './Account'

Umi 会自动理解成：

component: './Account/index.tsx'

举个例子你立刻懂

你有这个结构：

pages/ Account/ index.tsx ← 入口文件 List.tsx Edit.tsx

那么：

component: './Account'

Umi 会自动理解成：**

component: './Account/index.tsx'

举个例子你立刻懂

你有这个结构：

pages/ Account/ index.tsx ← 入口文件 List.tsx Edit.tsx

那么：

component: './Account'

= 自动找到 → Account/index.tsx