0.1 引用
0.1.1 react官網(wǎng)
0.1.2?dva官網(wǎng)
0.1.3?antd-mobile官網(wǎng)
0.1.4?umijs官網(wǎng)
0.1.5?轉(zhuǎn)載文章-umi操作手冊(cè)
一、what are these?
1.1 react.js
React 是一個(gè)聲明式，高效且靈活的用于構(gòu)建用戶界面的 JavaScript 庫(kù)。使用 React 可以將一些簡(jiǎn)短、獨(dú)立的代碼片段組合成復(fù)雜的 UI 界面，這些代碼片段被稱作“組件”。
1.2 dva
dva 首先是一個(gè)基于?redux?和?redux-saga?的數(shù)據(jù)流方案，然后為了簡(jiǎn)化開(kāi)發(fā)體驗(yàn)，dva 還額外內(nèi)置了?react-router?和?fetch，所以也可以理解為一個(gè)輕量級(jí)的應(yīng)用框架。
特性
易學(xué)易用，僅有 6 個(gè) api，對(duì) redux 用戶尤其友好，配合 umi 使用后更是降低為 0 API
elm 概念，通過(guò) reducers, effects 和 subscriptions 組織 model
插件機(jī)制，比如?dva-loading?可以自動(dòng)處理 loading 狀態(tài)，不用一遍遍地寫(xiě) showLoading 和 hideLoading
支持 HMR，基于?babel-plugin-dva-hmr?實(shí)現(xiàn) components、routes 和 models 的 HMR
1.3 Ant Design Mobile
一個(gè)基于 Preact / React / React Native 的 UI 組件庫(kù)
1.4 umi
umi是一個(gè)基于路由的框架，它支持類似于next.js的常規(guī)路由和各種高級(jí)路由功能，例如路由級(jí)按需加載。借助涵蓋從源代碼到構(gòu)建產(chǎn)品的每個(gè)生命周期的完整插件系統(tǒng)，umi能夠支持各種功能擴(kuò)展和業(yè)務(wù)需求。目前，umi在社區(qū)和公司內(nèi)部都有近50多個(gè)插件。
umi是Ant Financial的基本前端框架，已直接或間接為600多個(gè)應(yīng)用程序提供服務(wù)，包括Java，節(jié)點(diǎn)，移動(dòng)應(yīng)用程序，混合應(yīng)用程序，純前端資產(chǎn)應(yīng)用程序，CMS應(yīng)用程序等。umi為我們的內(nèi)部用戶提供了很好的服務(wù)，我們希望它也可以為外部用戶提供很好的服務(wù)。
功能
???開(kāi)箱即用，具有對(duì)react，react-router等的內(nèi)置支持。
??Next.js?之類的功能齊全的路由約定，并且還支持配置的路由
???完整的插件系統(tǒng)，涵蓋從源代碼到生產(chǎn)的每個(gè)生命周期
performance?高性能，通過(guò)插件支持PWA，路由級(jí)代碼拆分等
for?支持靜態(tài)導(dǎo)出，適應(yīng)各種環(huán)境，例如控制臺(tái)應(yīng)用程序，移動(dòng)應(yīng)用程序，egg，支付寶錢(qián)包等
???快速開(kāi)發(fā)的啟動(dòng)，支持支持DLL與配置
???與IE9兼容，基于UMI-插件，polyfills
???支持TypeScript，包括d.ts定義和umi test
???與深度集成DVA，支持鴨子目錄，模型的自動(dòng)加載，代碼分裂等
單純的react.js或dva創(chuàng)建項(xiàng)目流程
二、項(xiàng)目創(chuàng)建流程（umi）
（項(xiàng)目使用umi創(chuàng)建 直接看到2.4即可 其余為記錄獨(dú)立創(chuàng)建方式）
2.1 react
全局安裝：
$ npm install -g?create-react-app
定位到工作目錄下，創(chuàng)建項(xiàng)目：
$ create-react-app projectName
2.2 dva
安裝dva-cli
$ npm install dva-cli -g
新建項(xiàng)目：
$ dva new projectName
cd進(jìn)入項(xiàng)目目錄后啟動(dòng)項(xiàng)目
$ npm start
2.3 基于react引入antd
按需加載
$ npm install react-app-rewired customize-cra --save-dev
2.4 umi
全局安裝umi
$ yarn global add umi
首先，yarn create umi在新目錄中使用。
$ mkdir myapp && cd myapp
$ yarn create umi
選擇project。
確認(rèn)是否要使用TypeScript。
? Do you want to use typescript?(y/N)
然后，選擇所需的功能，并檢出plugin / umi-plugin-react以獲得詳細(xì)說(shuō)明。
然后手動(dòng)安裝依賴項(xiàng)，
$ yarn
最后，使用啟動(dòng)本地開(kāi)發(fā)服務(wù)器yarn start。
$ yarn start
三、umi項(xiàng)目架構(gòu)與tips
3.1項(xiàng)目架構(gòu)
3.2 umi路由約定
3.2.1 基礎(chǔ)路由
約定 pages 下所有的?js、jsx、ts?和?tsx?文件即路由,umi 會(huì)自動(dòng)生成路由。
3.2.2 動(dòng)態(tài)路由
umi 里約定，帶?$?前綴的目錄或文件為動(dòng)態(tài)路由。
3.2.3 可選的動(dòng)態(tài)路由
umi 里約定動(dòng)態(tài)路由如果帶?$?后綴，則為可選動(dòng)態(tài)路由。
3.2.4 嵌套路由
umi 里約定目錄下有?_layout.js?時(shí)會(huì)生成嵌套路由，以?_layout.js?為該目錄的 layout 。
3.2.5 404 路由
約定?pages/404.js?為 404 頁(yè)面，需返回 React 組件。
3.3?UMI通用母版頁(yè)約定
3.3.1 全局 layout
約定?src/layouts/index.js?為全局路由，返回一個(gè) React 組件，通過(guò)?props.children?渲染子組件。
export default function(props) {
return(
? ? <>
? ? ? <Header />
? ? ? { props.children }
? ? ? <Footer />
? ? </>
? );
}
3.3.2 不同的全局 layout
你可能需要針對(duì)不同路由輸出不同的全局 layout，umi 不支持這樣的配置，但你仍可以在?layouts/index.js?對(duì) location.path 做區(qū)分，渲染不同的 layout 。
比如想要針對(duì) /login 輸出簡(jiǎn)單布局
export default function(props) {
if(props.location.pathname ==='/login') {
return{ props.children }
? }
return(
? ? <>
? ? ? <Header />
? ? ? { props.children }
? ? ? <Footer />
? ? </>
? );
}
3.4?UMI-dva-model約定
model 分兩類，一是全局 model，二是頁(yè)面 model。全局 model 存于?/src/models/?目錄，所有頁(yè)面都可引用；頁(yè)面 model 不能被其他頁(yè)面所引用。
規(guī)則如下：
src/models/**/*.js?為 global model
src/pages/**/models/**/*.js?為 page model
global model 全量載入，page model 在 production 時(shí)按需載入，在 development 時(shí)全量載入
page model 會(huì)向上查找，比如 page js 為?pages/a/b.js，他的 page model 為?pages/a/b/models/**/*.js?+?pages/a/models/**/*.js，依次類推
約定 model.js 為單文件 model，解決只有一個(gè) model 時(shí)不需要建 models 目錄的問(wèn)題，有 model.js 則不去找?models/**/*.js
3.5?UMI操作相關(guān)
3.5.1 頁(yè)面跳轉(zhuǎn)
// 聲明式
import Link from 'umi/link';
export default () => (
? ? ? <Link to="/list">Go to list page</Link>
);
// 命令式
import router from 'umi/router';
function goToListPage() {
? ? ? router.push('/list');
}
3.5.2? 端口配置 .env文件
BROWSER=none
ESLINT=1
PORT=8001
3.6 Tips
src/global.css?此文件不走 css modules，且會(huì)自動(dòng)被引入，可以在這里寫(xiě)全局樣式，以及做樣式覆蓋。
