umi学习笔记

2019-01-07 本文已影响0人岩_424f

1.umi安装

详见这里：https://umijs.org/zh/guide/getting-started.html#%E7%8E%AF%E5%A2%83%E5%87%86%E5%A4%87

2.umi配置

在umi的配置中我们可以进行路由设置，插件设置等内容。

extraPostCSSPlugins 的配置
定义额外的 PostCSS 插件，格式为数组。
举例：umi配置extraPostCSSPlugins详解https://www.jianshu.com/p/f1f6ce592388
alias的配置
配置 webpack 的 resolve.alias 属性。
例如定义@表示/src
修改.umirc.js文件

import path from 'path';
export default {
   alias: {
    '@': path.resolve(__dirname, 'src'),
  },
};

3.umi目录

下面是umi+dva的目录结构

.
├── dist/                          // 默认的 build 输出目录
├── mock/                          // mock 文件所在目录，基于 express
├── config/
    ├── config.js                  // umi 配置，同 .umirc.js，二选一
 |—— public                        //共享资源
└── src/                           // 源码目录，可选
    ├── assets                  // 静态资源
    ├── layouts/index.js           // 全局布局
    ├── models/global.js
    ├── pages/                     // 页面目录，里面的文件即路由
        ├── .umi/                  // dev 临时目录，需添加到 .gitignore
        ├── .umi-production/       // build 临时目录，会自动删除
        ├── a                      //按页面维度进行组织
            ├── index.js
            ├── models
                ├── a1.js
                ├── a2.js
            ├── services
                ├── a.js
        ├── b                      //按页面维度进行组织
            ├── index.js
            ├── model.js
            ├── service.js
        ├── 404.js                 // 404 页面  
    ├── global.css                 // 约定的全局样式文件，自动引入，也可以用 global.less
    ├── global.js                  // 可以在这里加入 polyfill
├── .umirc.js                      // umi 配置，同 config/config.js，二选一
├── .env                           // 环境变量
└── package.json

好处是更加结构更加清晰了，减少耦合，一删全删，方便 copy 和共享。

在umi中如何访问静态资源

4.umi路由

umi有两种方式配置路由：

1.在umirc.js中手动配置路由
2.由umi自动生成路由配置

umi路由格式

1.基础路由

目录结构如下：

+ pages/
  + users/
    - index.js
    - list.js
  - index.js

手动配置
在umirs.js中配置routes:[]:

routes:[
  { path: '/', component: './index.js' },
  { path: '/users/', component: './users/index.js' },
  { path: '/users/list', component: './users/list.js' },
]

component 是相对于 src/pages 目录的

自动配置
按以上结构组织文件，umi会自动生成路由。

2.动态路由

umi 里约定，带 $ 前缀的目录或文件为动态路由

目录结构

+ pages/
  + $post/
    - index.js
    - comments.js
  + users/
    $id.js
  - index.js

手动配置

routes:[
    {path:'/',components:'/index.js'},
    {path:'/users/:id',components:'/users/$id.js'},
    {path:'/:post/,components:'/$post/index.js'},
    {path:'/:post/comments','/$post/comments.js},
]

自动配置
按以上结构组织文件，umi会自动生成路由。可以理解为$就是网址中的':'

3.嵌套路由

嵌套路由可以用来做布局页面。
目录结构如下：

+ pages/
  + users/
    - _layout.js
    - $id.js
    - index.js

以上_layout.js就是布局页面，嵌套路由的布局页面必须包含children,children即为要嵌套在布局页面中的内容。
以上_layout.js可以写成如下代码：

export default function(props) {
  return (
    <>
      <Header />
      { props.children }
      <Footer />
    </>
  );
}

手动配置
在umirs.js中配置routes:[]:

routes:[
  { path: '/users': component: './users/_layout.js'
    routes: [
     { path: '/users/', component: './users/index.js' },
     { path: '/users/:id', component: './users/$id.js' },
   ],
  },
]

自动配置
自动生成配置路由可以用以在umirc.js中设置需要排除的路由。

export default {
  history: 'hash',
  plugins: [
    ['umi-plugin-react', {
      antd: true,
      dva: true,
      routes: {
        exclude: [
          /model\.(j|t)sx?$/,
          /service\.(j|t)sx?$/,
          /models\//,
          /components\//,
          /services\//,
        ],
      },
    }],
  ],
};

按以上结构组织文件，umi会自动生成路由。

4.权限路由

手动配置umirc.js的Routes来实现。

[
  { path: '/', component: './pages/index.js' },
  { path: '/list', component: './pages/list.js', Routes: ['./routes/PrivateRoute.js'] },
]

Routes中的路径是相对与umirc.js的路径。

自动配置权限路由
通过注释配置
比如：

+ pages/
  - index.js

如果 pages/index.js 里包含：

/**
 * Routes:
 *    - ./src/routes/PrivateRoute.js
 */

则会生成：

[
  { path: '/', component: './index.js',
    title: 'Index Page',
    Routes: [ ' ./src/routes/PrivateRoute.js' ],
  },
]