umi+dva+antd项目操作手册

3,977 阅读3分钟

项目初始化

仅在开始构建的时候用到,后续直接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 下所有的 jsjsxtstsx 文件即路由,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,且会自动被引入,可以在这里写全局样式,以及做样式覆盖。