一、安装umi

Umi是蚂蚁金服出品的一款基于react的企业级前端应用框架。使用umi前，需要确保已安装node.js和npm，如果还未安装，可以寻找相应的教程进行安装。

可以使用npm或yarn进行umi安装，这里我们以npm为例。命令如下：

npm install umi -g

安装完毕后可以输入下面命令查看版本信息，检查是否安装成功。

umi -v

二、创建一个umi项目

在安装成功后，可以使用以下命令创建一个umi项目。

umi create app

等待项目初始化完成后，进入项目根目录，执行以下命令启动项目。

npm run dev

如果在启动过程中出现了提示错误信息，例如端口号被占用等问题，可以尝试修改相应的配置文件进行解决，一般来说配置文件在config目录下。

三、安装umi插件

umi提供了许多插件，可以帮忙更快捷更有效的开发项目。一般需要根据需要选择对应的插件进行安装。这里我们以安装dva为例（dva是基于redux、redux-saga和react-router库的一套轻量级框架）。

使用以下命令进行dva插件的安装。

umi plugin add dva

安装完毕后，在项目根目录下src目录下的models目录中新建一个demo.js文件，内容如下：

export default {
  namespace: 'demo',
  state: {
    text: 'Hello Umi',
  },
  reducers: {
    changeText(state, action) {
      return {
        ...state,
        text: action.payload,
      };
    },
  },
};

在src目录下的pages目录中新建一个demo.js文件，内容如下：

import React from 'react';
import { connect } from 'dva';

function Demo({ dispatch, demo }) {
  const { text } = demo;
  function handleChangeText() {
    dispatch({
      type: 'demo/changeText',
      payload: 'Hello Umi Dva',
    });
  }
  return (
    
      
{text}

      
    
  );
}
export default connect(({ demo }) => ({ demo }))(Demo);

新建完毕后，打开路由文件src目录下的routes.js，添加路由配置。

import Demo from './pages/demo';

export default () => [
  { path: '/', component: Demo },
];

然后运行npm run dev命令，即可在浏览器上看到效果。

四、umi配置文件

在umi项目中使用的配置文件一般存放在config目录下。我们可以通过修改配置文件来对项目进行定制和修改。下面列举了一些umi配置项的说明。

  • extraBabelPlugins： 自定义的babel插件。
  • define： 定义UMI_ENV，可以使用在项目中识别当前环境：development，test，production。
  • devtool： 定义开发环境的sourceMap配置。
  • alias： 别名配置。
  • publicPath： 静态资源 CDN 路径配置。

在config目录下的文件都是以js文件形式存在的，我们可以修改或添加对应的配置项。

export default {
  treeShaking: true,
  targets: {
    ie: 9,
  },
  devtool: 'sourcemap',
  extraBabelPlugins: [
    [
      'import',
      {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: true,
      },
    ],
  ],
};

五、umi插件库

umi提供了许多插件库，相较于自己写插件，使用插件库更加方便快捷。下面列举了几个常用的插件库。

  • umi-plugin-react： 用于配置react项目，例如Antd主题、dva数据流等。
  • umi-plugin-antd-style： 用于自定义Antd主题。
  • umi-plugin-pwa： 用于开发支持离线应用的 Progressive Web App 应用。
  • umi-plugin-dll： 用于打包 dll 文件，增加构建速度。
  • umi-plugin-mobx： 用于集成mobx状态管理库。

使用插件库非常简单，只需要在config目录下的文件中进行配置即可（各个插件库的使用方法可在官方文档中查看）。

export default {
  plugins: ['umi-plugin-react', 'umi-plugin-antd-style'],
};

六、umi路由配置

umi的路由配置是基于约定，即文件路径和文件名的约定。在一个pages目录下的js文件会被解析为一个路由。

.
└── pages
    ├── index.js
    ├── users
    │   ├── index.js
    │   ├── $id.js
    ├── ...

上面的结构中，pages/index.js文件对应路由路径为’/’；pages/users/index.js文件对应路由路径为’/users’；pages/users/$id.js文件对应路由路径为’/users/:id’。

umi还提供了一些辅助路由配置，例如access配置。

export default [
  {
    path: '/',
    component: '../layouts/BasicLayout',
    routes: [
      { path: '/', redirect: '/home' },
      {
        path: '/home',
        component: './Home',
      },
      {
        path: '/users',
        component: './UserList',
        access: 'hasRole',
      },
      {
        path: '/about',
        component: './About',
      },
    ],
  },
];

access配置可以用于根据不同的权限控制路由的访问。例如在UserList组件的JS文件中加入以下内容。

export default withRouter(connect(({ user }) => ({
  hasRole: user.hasRole,
}))(UserList));

UserList.access = 'hasRole';
UserList.wrappers = [
  withUndefinedAccess(UserList),
];

这个配置可以根据用户权限控制路由的访问。

七、umi约定式文件

umi支持以约定式文件扩展功能，例如约定式路由、约定式数据、约定式Mock等。

  • 约定式路由： 文件路径即路由配置。
  • 约定式数据： 文件路径即数据模型。
  • 约定式Mock： 文件路径即API接口，使用mockjs模拟数据。

这样的约定式文件使得开发过程变得更加方便和快捷。umi的约定式路由需要配置，而不是。

约定式数据模型和约定式Mock需要在model.js文件中进行配置。

export default {
  namespace: 'list',
  state: [],
  reducers: {
    add(state, { payload: item }) {
      return [...state, item];
    },
  },

  effects: {
    *assign({ payload: attribute }, { put, select }) {
      const list = yield select(state => state.list);
      yield put({
        type: 'add',
        payload: { name: 'item', ...attribute },
      });
    },
  },
};

以上是一个简单的数据模型的例子。

八、总结

本文对umi的安装、创建项目、安装插件、配置文件、插件库、路由配置、约定式文件等进行了详细的阐述，希望对umi初学者有所帮助。