如果你覺(jué)得該文章對(duì)你有幫助加個(gè)喜歡,github 加個(gè) start 謝謝
1.安裝 全局
$ npm install dva-cli -g
2.創(chuàng)建項(xiàng)目
選擇一個(gè)目錄然后創(chuàng)建項(xiàng)目
$ dva new my-project
dva-cli 會(huì)為你創(chuàng)建好基本的文件架構(gòu) 其中 .webpackrc 文件中是相關(guān)webpack的配置信息爹橱,格式為JSON,比如:
{"entry": "src/pages/*.js"}
如果你喜歡js的寫(xiě)法可以用.webpackrc.js進(jìn)行配置文件饭玲,支持ES6的語(yǔ)法驮配,比如:
export default{
entry: "src/pages/*.js"
}
相關(guān)配置可參考 https://github.com/sorrycc/roadhog/blob/master/README_zh-cn.md#extrababelpresets
3. 安裝 antd-mobile
$ npm install antd-mobile --save
安裝過(guò)程中如果出現(xiàn)類似以下警告信息
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)
因?yàn)閍ntd-mobile可以同時(shí)制作app所以需要 react-native 依賴
$ npm install react-native --save
4. 建議對(duì)項(xiàng)目是用按需加載,這樣做可以減少打包后的體積大小
找到根目錄下的.webpackrc文件,并在該文件中添加以下代碼
"extraBabelPlugins": [
["import", { "libraryName": "antd-mobile", "style": "css" }]
]
并安裝以下插件
$ npm install babel-plugin-import --save-dev
完成以上操作就可以正確的安裝并使用 antd-design 組件庫(kù)了卦停,趕緊嘗試一下吧
如果你對(duì)文章感興趣 或者有其他技術(shù)問(wèn)題探討
qq群:218618405
github 地址:https://github.com/Sawyer-china/