一、安装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}
原创文章，作者：XRRPF，如若转载，请注明出处：https://www.506064.com/n/334104.html
微信扫一扫 
支付宝扫一扫 