umi+dva+antd项目操做手册

项目初始化

仅在开始构建的时候用到，后续直接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]复制代码

1. 选择App
2. 不适用typescript
3. 按空格分别选择dva和antd
4. 安装完成以后运行

   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 model
• src/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操做相关

1. 页面跳转

   // 声明式
   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');
   }
   
   复制代码

2. 端口配置 .env文件

   BROWSER=none
   ESLINT=1
   PORT=8001复制代码

其余说明：

1. src/global.css 此文件不走 css modules，且会自动被引入，能够在这里写全局样式，以及作样式覆盖。