用umi開發專案實戰

建立乙個空資料夾 umi-study 

pages下面有乙個隱藏的.umi資料夾。

umi dev 開啟乙個本地伺服器。

umi g page user 建立乙個user頁面

根目錄下建立乙個mock資料夾

建立user.js

根目錄下建立乙個layouts資料夾,測試了乙個 也可以是layout， 不能是其它的名字。

layouts資料夾下建立乙個index.js檔案

import react from 'react'

class layout extends react.component 
}render() )}
}export default layout;

建立config資料夾 index.js

]// 新增請求***

axios.interceptors.request.use((req) =>

return req;

// 在傳送請求之前做些什麼

}, (error) => );

// 新增響應***

axios.interceptors.response.use((response) => , (error) => );

class axios ).catch((error) => )

}post(path, params) ).catch((error) => )

}}export default new axios();

這裡需要按照axios 

建立api資料夾 user.js

import axios from "../config/index";

export const getuserdetail = (params) => axios.get('/user/getuserdetail', )

index.js

import user from './user'

export default 

import  from 'mobx'

import  from '../../api/user'
class user  = await getuserdetail()
this.data = data;
return data
}}export default new user();

更改layout元件

import react from 'react'

import  from 'mobx-react'
import store from '../pages/store'
class init extends react.component 
}@observer
class layout extends react.component 
}render() )}
componentdidmount() )
}}export default layout;

UMI開源專案

本文主要圍繞umi是什麼及其特徵 安裝應用 模板例子等四個方面內容來講解umi，希望能夠對初學者有所啟發。一 umi是什麼 umi是可插拔的企業級反應應用程式框架。二 特徵 特徵 三 安裝應用 安裝deps npm install g umi 建立應用程式 建立頁面 umi generate pag...

umi建立前端專案

umi建立專案 入門級別 建立src pages helloworld.js頁面，umi的預設的頁面路徑 在helloworld.js中新增jsx html js 啟動服務 umi dev 這樣就可以訪問網頁服務了 構建，路徑在dist下 umi build helloworld.js export...

umi3js 建立專案

安裝 npm i umi g專案目錄 生成頁面 生成首頁 umi g page index啟動 umi dev再建立乙個頁面about umi g page about動態路由 再建立乙個頁面users id umi g page users id 動態路由取值 export default 巢狀路...