前端自學之路，基於DVA腳手架的項目實戰

許多國內的大廠都在擁抱 Facebook 開源的 React，螞蟻金服、微信都在使用。我們公司為了長遠的考慮，經過長期的學習和探索，決定使用螞蟻金服開源的腳手架工具 Dva 進行前端的開發。

在使用 Dva 之前，需要學習的知識有 Webpack、ES6等知識。我個人喜歡用到啥再學啥，其他比如快捷鍵這種可以幫助我偷懶的技巧，我才會額外花時間去了解。這裡有一份Dva官方的知識地圖，按照這個知識地圖學習，可以按圖索驥，除去糟粕，汲取精華。

準備工作

安裝好dva腳手架工具，使用命令

npm install -g dva-cli

檢查安裝成功與否：dva -v

創建新的項目

dva new dvaproject

Dva 會載入很多東西，這包含 src 在內的一些文件。

• package.json 是依賴和組件庫的配置文件，dva 兼容類似於 WeUI 的組件庫，使用 npm install xxx --save 都會在這裡註冊,比如 "react": "^15.4.0"，表示 react 這個依賴，版本號是 15.4.0。

• .roadhogrc 是入口文件，在配置按需載入功能的時候，需要在這裡添加庫的名稱。比如以下代碼：

  "extraBabelPlugins": [ "transform-runtime", ["import", { "libraryName": "antd", "style": true }] ],

  請求數據的地址也在這個文件中配置，如下：

  "proxy": { "/api": { "target": "http://localhost:8011/", "changeOrigin": true } }

  這會在 service 文件夾下的各個文件中用到，比較重要的地方在於 "/api" ,表示遇到 「/api」 的地方就用目標地址 "http://localhost:8011/"代替。比如使用 request 方法請求用戶數據：

  `request(/api/users, { method: POST, body: JSON.stringify(values),});`

  這時程序就會向http://localhost:8011/users發送post請求。

• src文件夾下的文件是最關鍵的地方。

其中，index.js:程序入口router.js:路由的配置utils：常用的工具性代碼services:請求、提交數據routes：組件的入口components:各個組件，models：數據模型。

基本上，routes、components、models 這三個文件夾下的文件都是對應的，比如關於用戶（users）的一個頁面。其對應關係是：

users(routes)-users(component)-users(models)

使用命令 cd xxx 可以進入當前文件夾下的子文件夾 xxx 下。

cd dvaprojectnpm installnpm start

三條命令後，瀏覽器會自動打開一個窗口顯示主頁面，如下圖所示。

-----------------------------------------

歡迎大家關注微信公眾號：FrontEndVisDev

個人網站：http://kurryluo.github.io

各個分享平台的KurryLuo都是在下。