如果你覺得該文章對你有幫助加個喜歡，github 加個 start 謝謝

1.安裝 全域性

$  npm install dva-cli -g

2.建立專案

選擇一個目錄然後建立專案

$ dva new my-project

dva-cli 會為你建立好基本的檔案架構 其中 .webpackrc 檔案中是相關webpack的配置資訊，格式為JSON，比如：

  {"entry": "src/pages/*.js"}

如果你喜歡js的寫法可以用.webpackrc.js進行配置檔案，支援ES6的語法，比如：

 export default{
    entry: "src/pages/*.js"
 }

相關配置可參考 https://github.com/sorrycc/roadhog/blob/master/README_zh-cn.md#extrababelpresets

3. 安裝 antd-mobile

  $ npm install antd-mobile --save

安裝過程中如果出現類似以下警告資訊

peerDependencies WARNING antd-mobile@2.1.3 › react-native-collapsible@^0.9.0 requires a peer of react-native@* but none was installed
peerDependencies WARNING antd-mobile@2.1.3 › react-native-drawer-layout@~1.3.0 requires a peer of react-native@* but none was installed
Recently updated (since 2018-01-01): 2 packages  (detail see file /Applications/MAMP/htdocs/react/dva-project/node_modules/.recently_updates.txt)

因為antd-mobile可以同時製作app所以需要 react-native 依賴

$ npm install react-native --save

4. 建議對專案是用按需載入，這樣做可以減少打包後的體積大小

找到根目錄下的.webpackrc檔案，並在該檔案中新增以下程式碼

"extraBabelPlugins": [
    ["import", { "libraryName": "antd-mobile", "style": "css" }]
]

並安裝以下外掛

$ npm install babel-plugin-import --save-dev

完成以上操作就可以正確的安裝並使用 antd-design 元件庫了，趕緊嘗試一下吧

如果你對文章感興趣 或者有其他技術問題探討

qq群：218618405
github 地址：https://github.com/Sawyer-china/