許多國內(nèi)的大廠都在擁抱 Facebook 開源的 React，螞蟻金服褒侧、微信都在使用。我們公司為了長遠(yuǎn)的考慮谊迄，經(jīng)過長期的學(xué)習(xí)和探索闷供，決定使用螞蟻金服開源的腳手架工具 Dva 進(jìn)行前端的開發(fā)。
在使用 Dva 之前统诺，需要學(xué)習(xí)的知識(shí)有 Webpack歪脏、ES6等知識(shí)。我個(gè)人喜歡用到啥再學(xué)啥粮呢，其他比如快捷鍵這種可以幫助我偷懶的技巧婿失，我才會(huì)額外花時(shí)間去了解。這里有一份Dva官方的知識(shí)地圖啄寡，按照這個(gè)知識(shí)地圖學(xué)習(xí)豪硅，可以按圖索驥，除去糟粕挺物，汲取精華懒浮。
準(zhǔn)備工作
安裝好dva腳手架工具，使用命令
npm install -g dva-cli
檢查安裝成功與否：dva -v
創(chuàng)建新的項(xiàng)目
dva new dvaproject
Dva 會(huì)加載很多東西识藤，這包含 src 在內(nèi)的一些文件砚著。
package.json 是依賴和組件庫的配置文件，dva 兼容類似于 WeUI 的組件庫痴昧，使用 npm install xxx --save 都會(huì)在這里注冊(cè),比如 "react": "^15.4.0"稽穆，表示 react 這個(gè)依賴，版本號(hào)是 15.4.0赶撰。
-
.roadhogrc 是入口文件舌镶，在配置按需加載功能的時(shí)候，需要在這里添加庫的名稱扣囊。比如以下代碼：
"extraBabelPlugins": [ "transform-runtime", ["import", { "libraryName": "antd", "style": true }] ],請(qǐng)求數(shù)據(jù)的地址也在這個(gè)文件中配置乎折，如下：
"proxy": { "/api": { "target": "http://localhost:8011/", "changeOrigin": true } }這會(huì)在 service 文件夾下的各個(gè)文件中用到，比較重要的地方在于 "/api" ,表示遇到 “/api” 的地方就用目標(biāo)地址 "http://localhost:8011/"代替侵歇。比如使用 request 方法請(qǐng)求用戶數(shù)據(jù)：
`request('/api/users', { method: 'POST', body: JSON.stringify(values), });`這時(shí)程序就會(huì)向http://localhost:8011/users發(fā)送post請(qǐng)求骂澄。
src文件夾下的文件是最關(guān)鍵的地方。
其中惕虑，
index.js:程序入口
router.js:路由的配置
utils：常用的工具性代碼
services:請(qǐng)求坟冲、提交數(shù)據(jù)
routes：組件的入口
components:各個(gè)組件磨镶，
models：數(shù)據(jù)模型。
基本上健提，routes琳猫、components、models 這三個(gè)文件夾下的文件都是對(duì)應(yīng)的私痹，比如關(guān)于用戶（users）的一個(gè)頁面脐嫂。其對(duì)應(yīng)關(guān)系是：
users(routes)-users(component)-users(models)
使用命令 cd xxx 可以進(jìn)入當(dāng)前文件夾下的子文件夾 xxx 下。
cd dvaproject
npm install
npm start
三條命令后紊遵，瀏覽器會(huì)自動(dòng)打開一個(gè)窗口顯示主頁面账千，如下圖所示暗膜。
歡迎大家關(guān)注微信公眾號(hào)：FrontEndVisDev
不僅有前端和可視化匀奏，還有我的創(chuàng)業(yè)經(jīng)驗(yàn)
個(gè)人網(wǎng)站：http://kurryluo.github.io
各個(gè)分享平臺(tái)的KurryLuo都是在下。
