react+dva+antd+umi項目創建操做流程及知識點總結

0.1 引用

0.1.1 react官網

0.1.2 dva官網

0.1.3 antd-mobile官網

0.1.4 umijs官網

0.1.5 轉載文章-umi操做手冊

1、what are these?

1.1 react.js

React 是一個聲明式，高效且靈活的用於構建用戶界面的 JavaScript 庫。使用 React 能夠將一些簡短、獨立的代碼片斷組合成複雜的 UI 界面，這些代碼片斷被稱做「組件」。

1.2 dva

dva 首先是一個基於 redux 和 redux-saga 的數據流方案，而後爲了簡化開發體驗，dva 還額外內置了 react-router 和 fetch，因此也能夠理解爲一個輕量級的應用框架。

通常來講，能夠分爲主要的三個部分，models、services 和 views。其中，views負責頁面上的展現，這個不作贅述；services裏面主要寫一些請求後臺接口的方法；models是其中最重要的概念，這裏存放了各類數據，並對數據進行相應的交互。

 

 

 

 

 

 

 

 

 

 

1.3 Ant Design Mobile

一個基於 Preact / React / React Native 的 UI 組件庫

1.4 umi

umi是一個基於路由的框架，它支持相似於next.js的常規路由和各類高級路由功能，例如路由級按需加載。藉助涵蓋從源代碼到構建產品的每一個生命週期的完整插件系統，umi可以支持各類功能擴展和業務需求。目前，umi在社區和公司內部都有近50多個插件。

umi是Ant Financial的基本前端框架，已直接或間接爲600多個應用程序提供服務，包括Java，節點，移動應用程序，混合應用程序，純前端資產應用程序，CMS應用程序等。umi爲咱們的內部用戶提供了很好的服務，咱們但願它也能夠爲外部用戶提供很好的服務。

功能

📦 開箱即用，具備對react，react-router等的內置支持。

🏈Next.js 之類的功能齊全的路由約定，而且還支持配置的路由

🎉 完整的插件系統，涵蓋從源代碼到生產的每一個生命週期

performance 高性能，經過插件支持PWA，路由級代碼拆分等

for 支持靜態導出，適應各類環境，例如控制檯應用程序，移動應用程序，egg，支付寶錢包等

🚄 快速開發的啓動，支持支持DLL與配置

🐠 與IE9兼容，基於UMI-插件，polyfills

🍁 支持TypeScript，包括d.ts定義和umi test

🌴 與深度集成DVA，支持鴨子目錄，模型的自動加載，代碼分裂等

單純的react.js或dva建立項目流程

 

2、項目建立流程（umi）

（項目使用umi建立 直接看到2.4便可 其他爲記錄獨立建立方式）

2.1 react

全局安裝：

$ npm install -g create-react-app

定位到工做目錄下，建立項目：

$ create-react-app projectName

2.2 dva

安裝dva-cli

$ npm install dva-cli -g

新建項目：

$ dva new projectName

cd進入項目目錄後啓動項目

$ 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。

 

確認是否要使用TypeScript。

? Do you want to use typescript?(y/N)

而後，選擇所需的功能，並檢出plugin / umi-plugin-react以得到詳細說明。

 

這裏選擇antd+dva+dll

而後手動安裝依賴項，

$ yarn

最後，使用啓動本地開發服務器yarn start。

$ yarn start

3、umi項目架構與tips

3.1項目架構

 

umi項目架構

3.2 umi路由約定

3.2.1 基礎路由

約定 pages 下全部的 js、jsx、ts 和 tsx 文件即路由,umi 會自動生成路由。

3.2.2 動態路由

umi 里約定，帶 $ 前綴的目錄或文件爲動態路由。

3.2.3 可選的動態路由

umi 里約定動態路由若是帶 $ 後綴，則爲可選動態路由。

3.2.4 嵌套路由

umi 里約定目錄下有 _layout.js 時會生成嵌套路由，以 _layout.js 爲該目錄的 layout 。

3.2.5 404 路由

約定 pages/404.js 爲 404 頁面，需返回 React 組件。

3.3 UMI通用母版頁約定

3.3.1 全局 layout

約定 src/layouts/index.js 爲全局路由，返回一個 React 組件，經過 props.children 渲染子組件。

export default function(props) {

return(

    <>

      <Header />

      { props.children }

      <Footer />

    </>

  );

}

3.3.2 不一樣的全局 layout

你可能須要針對不一樣路由輸出不一樣的全局 layout，umi 不支持這樣的配置，但你仍能夠在 layouts/index.js 對 location.path 作區分，渲染不一樣的 layout 。

好比想要針對 /login 輸出簡單佈局

export default function(props) {

if(props.location.pathname ==='/login') {

return{ props.children }

  }

return(

    <>

      <Header />

      { props.children }

      <Footer />

    </>

  );

}

3.4 UMI-dva-model約定

model 分兩類，一是全局 model，二是頁面 model。全局 model 存於 /src/models/ 目錄，全部頁面均可引用；頁面 model 不能被其餘頁面所引用。

規則以下：

src/models/**/*.js 爲 global model

src/pages/**/models/**/*.js 爲 page model

global model 全量載入，page model 在 production 時按需載入，在 development 時全量載入

page model 會向上查找，好比 page js 爲 pages/a/b.js，他的 page model 爲 pages/a/b/models/**/*.js + pages/a/models/**/*.js，依次類推

約定 model.js 爲單文件 model，解決只有一個 model 時不須要建 models 目錄的問題，有 model.js 則不去找 models/**/*.js

3.5 UMI操做相關

3.5.1 頁面跳轉

// 聲明式

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，且會自動被引入，能夠在這裏寫全局樣式，以及作樣式覆蓋。