umi安裝詳解

一、安裝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}
  Change Text
原創文章，作者：XRRPF，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/334104.html