想要把antd的ui集成到当前的ReactJS项目中
ant-design/ant-design-mobile: A configurable Mobile UI
无意间发现有人已经折腾好了：
Molin123/react-molin: react-molin是一个全新的基于webpack3、react15、react-router4、antd-mobile的前端架构实现方案（h5）
但是自己还是要自己慢慢打造
ant-design-mobile/introduce.en-US.md at master · ant-design/ant-design-mobile
Ant Design Mobile of React – Ant Design
然后去看看，能否方便的集成
在底部的tab标签栏
➜ ReactjsTemplate git:(master) ✗ npm install antd-mobile babel-plugin-import –save-dev npm WARN [email protected] requires a peer of react-native@* but none was installed. npm WARN [email protected] requires a peer of react-native@>=0.20.0 but none was installed. added 56 packages in 21.177s |
再去：
➜ ReactjsTemplate git:(master) ✗ npm install [email protected] –save-dev npm WARN [email protected] requires a peer of react-native@* but none was installed. npm WARN [email protected] requires a peer of react-native@>=0.20.0 but none was installed. added 19 packages in 13.566s |
然后去更新webpack配置
其中参考：
ant-design/babel-plugin-import: Modularly import plugin for babel.
antd-mobile-samples/create-react-app at 1.x · ant-design/antd-mobile-samples
算了，去编译结果出错：
ERROR in ./node_modules/antd-mobile/lib/button/style/index.css Module parse failed: /Users/crifan/dev/dev_root/crifan/ReactjsTemplate/ReactjsTemplate/node_modules/antd-mobile/lib/button/style/index.css Unexpected token (1:0) You may need an appropriate loader to handle this file type. | .hairline-remove-right-bottom { | border-bottom: 0; | } @ ./node_modules/antd-mobile/lib/button/style/css.web.js 7:0-22 @ ./src/pages/main/main.js @ ./src/pages/app.js @ ./src/app.entry.js |
暂时还是放弃继承antd，还是太麻烦。
【后记】
发现无意间发现此处是自己的问题，然后解决掉了：
【已解决】Reactjs中导入react-weui.css出错编译：You may need an appropriate loader to handle this file type
那抽空再去试试antd-mobile。
转载请注明：在路上 » 【记录】ReactJS项目中集成antd-mobile