最新消息:20190717 VPS服务器:Vultr新加坡,WordPress主题:大前端D8,统一介绍入口:关于

【记录】ReactJS项目中集成antd-mobile

ReactJS crifan 1014浏览 0评论

想要把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 – 移动端设计规范

Ant Design Mobile of React – Ant Design

然后去看看,能否方便的集成

在底部的tab标签栏

标签栏 TabBar – Ant Design

➜  ReactjsTemplate git:(master) ✗ npm install antd-mobile babel-plugin-import –save-dev
npm WARN react-native-drawer-layout@1.3.2 requires a peer of react-native@* but none was installed.
npm WARN react-native-scrollable-tab-view@0.7.4 requires a peer of react-native@>=0.20.0 but none was installed.
added 56 packages in 21.177s

再去:

➜  ReactjsTemplate git:(master) ✗ npm install svg-sprite-loader@0.3.1 –save-dev
npm WARN react-native-drawer-layout@1.3.2 requires a peer of react-native@* but none was installed.
npm WARN react-native-scrollable-tab-view@0.7.4 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

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
58 queries in 0.098 seconds, using 18.84MB memory