项目初始化
仅在开始构建的时候用到,后续直接git拉取项目模板代码即可
环境准备
node版本:v8.11.2
npm版本:5.6.0
umi:2.7.3
安装全局依赖(当前版本2.7.3)
npm install -g umi
create-umi:0.13.4
安装umi脚手架工具(当前版本0.13.4)
npm install -g create-umi
初始化项目
进入项目目录使用命令:
create-umi 或者 create-umi [appName]
- 选择App
- 不适用typescript
- 按空格分别选择dva和antd
- 安装完成之后运行
npm install
运行项目
执行命令
npm start
效果如图所示:
UMI路由约定
基础路由
约定 pages 下所有的 js
、jsx
、ts
和 tsx
文件即路由,umi 会自动生成路由。
动态路由
umi 里约定,带 $
前缀的目录或文件为动态路由。
+ pages/
+ $post/
- index.js
- comments.js
+ users/
$id.js
- index.js
会生成路由配置如下:
[
{ path: '/', component: './pages/index.js' },
{ path: '/users/:id', component: './pages/users/$id.js' },
{ path: '/:post/', component: './pages/$post/index.js' },
{ path: '/:post/comments', component: './pages/$post/comments.js' },
]
可选的动态路由
umi 里约定动态路由如果带 $
后缀,则为可选动态路由。
比如以下结构:
+ pages/
+ users/
- $id$.js
- index.js
会生成路由配置如下:
[
{ path: '/': component: './pages/index.js' },
{ path: '/users/:id?': component: './pages/users/$id$.js' },
]
嵌套路由
umi 里约定目录下有 _layout.js
时会生成嵌套路由,以 _layout.js
为该目录的 layout 。
比如以下目录结构:
+ pages/
+ users/
- _layout.js
- $id.js
- index.js
会生成路由配置如下:
[
{ path: '/users', component: './pages/users/_layout.js',
routes: [
{ path: '/users/', component: './pages/users/index.js' },
{ path: '/users/:id', component: './pages/users/$id.js' },
],
},
]
404 路由
约定 pages/404.js
为 404 页面,需返回 React 组件。
比如:
export default () => {
return (
<div>I am a customized 404 page</div>
);
};
注意:开发模式下,umi 会添加一个默认的 404 页面来辅助开发,但你仍然可通过精确地访问
/404
来验证 404 页面。
UMI通用母版页约定
全局 layout
约定 src/layouts/index.js
为全局路由,返回一个 React 组件,通过 props.children
渲染子组件。
比如:
export default function(props) {
return (
<>
<Header />
{ props.children }
<Footer />
</>
);
}
不同的全局 layout
你可能需要针对不同路由输出不同的全局 layout,umi 不支持这样的配置,但你仍可以在 layouts/index.js
对 location.path 做区分,渲染不同的 layout 。
比如想要针对 /login 输出简单布局,
export default function(props) {
if (props.location.pathname === '/login') {
return <SimpleLayout>{ props.children }</SimpleLayout>
}
return (
<>
<Header />
{ props.children }
<Footer />
</>
);
}
UMI-dva-model约定
model 分两类,一是全局 model,二是页面 model。全局 model 存于 /src/models/
目录,所有页面都可引用;页面 model 不能被其他页面所引用。
规则如下:
src/models/**/*.js
为 global modelsrc/pages/**/models/**/*.js
为 page model- global model 全量载入,page model 在 production 时按需载入,在 development 时全量载入
- page model 为 page js 所在路径下
models/**/*.js
的文件 - page model 会向上查找,比如 page js 为
pages/a/b.js
,他的 page model 为pages/a/b/models/**/*.js
+pages/a/models/**/*.js
,依次类推 - 约定 model.js 为单文件 model,解决只有一个 model 时不需要建 models 目录的问题,有 model.js 则不去找
models/**/*.js
举个例子,
+ src
+ models
- g.js
+ pages
+ a
+ models
- a.js
- b.js
+ ss
- s.js
- page.js
+ c
- model.js
+ d
+ models
- d.js
- page.js
- page.js
如上目录:
- global model 为
src/models/g.js
/a
的 page model 为src/pages/a/models/{a,b,ss/s}.js
/c
的 page model 为src/pages/c/model.js
/c/d
的 page model 为src/pages/c/model.js, src/pages/c/d/models/d.js
UMI操作相关
- 页面跳转
// 声明式 import Link from 'umi/link'; export default () => ( <Link to="/list">Go to list page</Link> ); // 命令式 import router from 'umi/router'; function goToListPage() { router.push('/list'); }
- 端口配置 .env文件
BROWSER=none ESLINT=1 PORT=8001
其他说明:
- src/global.css 此文件不走 css modules,且会自动被引入,可以在这里写全局样式,以及做样式覆盖。