项目初始化
仅在开始构建的时候用到，后续直接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 (
I am a customized 404 page
);
};
复制代码注意：开发模式下，umi 会添加一个默认的 404 页面来辅助开发，但你仍然可通过精确地访问
/404来验证 404 页面。
UMI通用母版页约定
全局 layout
约定 src/layouts/index.js 为全局路由，返回一个 React 组件，通过 props.children 渲染子组件。
比如：
export default function(props) {
return (
<>
不同的全局 layout
你可能需要针对不同路由输出不同的全局 layout，umi 不支持这样的配置，但你仍可以在 layouts/index.js 对 location.path 做区分，渲染不同的 layout 。
比如想要针对 /login 输出简单布局，
export default function(props) {
if (props.location.pathname === '/login') {
return { props.children }
}
return (
<>
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 () => ( "/list">Go to list page ); // 命令式 import router from 'umi/router'; function goToListPage() { router.push('/list'); } 复制代码 - 端口配置 .env文件
BROWSER=none ESLINT=1 PORT=8001复制代码
其他说明：
- src/global.css 此文件不走 css modules，且会自动被引入，可以在这里写全局样式，以及做样式覆盖。