React+umi+dva+antd入門兼項(xiàng)目搭建
前言：React+umi+dva+antd是目前主流的前端框，本文章從零搭建一個React+umi+dva+antd的前端框架，供大家參考。
一 項(xiàng)目組成
-
React
React是前端三大主流框架之一。你可以在React里傳遞多種類型的參數(shù)，如聲明代碼，幫助你渲染出UI、也可以是靜態(tài)的HTML DOM元素、也可以傳遞動態(tài)變量、甚至是可交互的應(yīng)用組件
-
umi
umi是可擴(kuò)展的企業(yè)級前端應(yīng)用框架。umi以路由為基礎(chǔ)的，同時支持配置式路由和約定式路由，保證路由的功能完備，并以此進(jìn)行功能擴(kuò)展。然后配以生命周期完善的插件體系，覆蓋從源碼到構(gòu)建產(chǎn)物的每個生命周期，支持各種功能擴(kuò)展和業(yè)務(wù)需求。
其實(shí)umi的作用說人話就是，在安裝umi這一個依賴后，就可以立馬啟動開發(fā)，無需再安裝react、webpack、react-router等，簡稱開箱即用。還有就是使用umi后項(xiàng)目的路由可以變得非常簡潔明了。
-
dva
dva 首先是一個基于 redux 和 redux-saga 的數(shù)據(jù)流方案，然后為了簡化開發(fā)體驗(yàn)，dva 還額外內(nèi)置了 react-router 和 fetch，所以也可以理解為一個輕量級的應(yīng)用框架。
dva可以分為主要的三個部分，models、services 和 views。其中，views層負(fù)責(zé)頁面上的展示；services層里面主要寫一些請求后臺接口的方法；models層存放了各種數(shù)據(jù)，并對數(shù)據(jù)進(jìn)行相應(yīng)的交互。
-
antd
Ant Design是一套企業(yè)級 UI 設(shè)計語言和 React 組件庫，它內(nèi)含超多的前端組件，例如Table表格、Modal彈窗、Tootip文字提示等等，antd把它們封裝成了一個個的‘Html標(biāo)簽’，再配合這些組件的API，使得它們非常的方便靈活。
二 項(xiàng)目搭建
-
項(xiàng)目環(huán)境
本項(xiàng)目是在win10操作系統(tǒng)下完成，且需要Node.js且版本大于大于等于 8.5.0。
在后續(xù)操作匯總中我們要多次用到npm命令，npm是Node.js的包管理工具（package manager），故我們在項(xiàng)目開始前要先查看一下node版本和npm版本是否達(dá)標(biāo)。node -v
npm -v -
搭建準(zhǔn)備
首先在本地選擇一個空文件夾，鼠標(biāo)選中上面的地址輸入cmd回車進(jìn)入管理員模式
-
全局安裝umi
npm install umi -g
-
新建項(xiàng)目文件夾并進(jìn)入項(xiàng)目文件夾
mkdir umi_wy && cd umi_wy
-
執(zhí)行umi命令
npm create umi
-
選擇umi模板信息
- 運(yùn)行完后會 讓我們選擇umi模板類型，這是我們選擇第一項(xiàng)ant-desigen-pro
選完umi模板類型后，我們需要選擇是否使用什么語言，這里我們選擇TypeScipt，也就是ts，點(diǎn)擊回車即選擇成功
接著我們要選擇哪種類型的腳手架，是完整的還是簡單的，這里我們選擇簡單的，然后就搭建完成了。
-
項(xiàng)目搭建完成
經(jīng)過上門的一系列命令，項(xiàng)目就搭建完成了！！
-
注意事項(xiàng)
在執(zhí)行 npm create umi 命令時 如果報錯，這個時候需要者找到nodejs文件夾下的create-umi.cmd文件，因?yàn)槊總€人的文件地址不同，所以這里就不貼出圖片了，選中這個文件反鍵點(diǎn)擊編輯。如果看到以下內(nèi)容，刪除開頭的 %~dp0\ 再在剛剛的命令行輸入create-umi即可。
@"%~dp0\C:\Users\PC\AppData\Local\Yarn\Data\global\node_modules.bin\create-umi.cmd" %*
@"C:\Users\PC\AppData\Local\Yarn\Data\global\node_modules.bin\create-umi.cmd" %*
三 項(xiàng)目詳情
-
安裝依賴并運(yùn)行項(xiàng)目
將文件拖入vsCode，打開終端輸入以下命令
npm i
依賴安裝完成后，輸入
npm start
在網(wǎng)頁打開地址，就可以看到我們構(gòu)建的項(xiàng)目登陸頁
輸入賬號密碼，點(diǎn)擊登陸就可以看到我們的首頁，看到這里是不是很熟悉，這就是我們平時開發(fā)的項(xiàng)目的基本框架，我們再來看看代碼，看一下熟悉不熟悉。
-
項(xiàng)目代碼簡介
routes.ts 路由頁
menu.ts 面包屑導(dǎo)航&&菜單文字文件
登陸頁代碼
