如果你觉得该文章对你有帮助加个喜欢，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/