一、安装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初学者有所帮助。
