文档章节

antd-mobile使用

hezhongjie
 hezhongjie
发布于 2017/08/31 15:42
字数 589
阅读 128
收藏 0
点赞 0
评论 0

antd-moblie的使用和antd的使用大体相同,相关配置文档和详细.

一下是使用中遇到的问题,且官网中并未明确说明.

1.在webpack.config中引入andt-mobile组件库:

['import', { libraryName: 'antd-mobile', style: true }]             

若组件的样式没有引入或引入错误,请尝试将其修改为 

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

 

2.自定义svg图片已不再支持(https://github.com/ant-design/ant-design-mobile/pull/1740):因此配置中不必再设置svg-sprite-loader了,svg引用方式改为:<img src={svg的url}/>

注:实际使用中发现即使是组件库中内置的Icon也有可能无法显示,下面是我的测试结果:

dva-cli创建的项目:
   1. svg显示结果:
       -----------------------------------------------------------------------------------
       roadhog配置      不配置      配置svgSpriteLoaderDirs项        svgSpriteLoaderDirs
                                   (只处理antd-mobile中的svg)       (处理antd-mobile和自定义的Icon)
       --------------------------------------------------------------------------------------
       Icon(内置)        不显示         正常                                    正常
       ----------------------------------------------------------------------------------------
       Icon(自定义svg)      不显示         不显示                                  不显示
        --------------------------------------------------------------------------------------
        img标签使用svg         正常           正常                                    不显示
       ----------------------------------------------------------------------------------------
    暂时认为:在dva-cli中为了更好的使用svg,设置svgSpriteLoaderDirs(只处理antd-mobile);自定义svg全部使用img中;
   2.页面js稍大,
   3.官方似乎更推荐使用 create-react(-native)-app进行创建项目

   create-react-app :
    -----------------------------------------------------------------------------------
      无                无         (只处理antd-mobile中的svg)    (处理antd-mobile和自定义的Icon)
     ---------------------------------------------------------------------------------------
     Icon(内置)        不显示        不显示                                 不显示
     ----------------------------------------------------------------------------------------
     Icon(自定义svg)   不显示         不显示                                不显示
     --------------------------------------------------------------------------------------
     img标签使用svg     正常          正常                                   正常
     ----------------------------------------------------------------------------------
    create-react-app中:svg只能自己下载,使用本地的了.

3.全局状态管理:

    1.使用dva-cli创建的项目会有module层,用来统一管理state;

    2.使用create-react-app创建的项目没有默认的module层,因此若想保留一些全局的state和操作全局state的方法,需要在rootRouter中把全局state和操作方法作为参数统一传入childrenRouter中,

4.缩小打包体积:

    在开发单页面应用时,当多个"页面"引用了相同的组件时,会在每个页面中都打包一次,造成文件的体积变大; 但是当这个组件也在rootRouter中引用时,则只会打包进bundle.js中,其他页面中将不会重复打包,将明显减小每个页面的体积(此方法在dva-cil和create-react-app创建的项目中都有效,应该是他们的配置中都有相关的配置).

© 著作权归作者所有

共有 人打赏支持
hezhongjie
粉丝 4
博文 96
码字总数 42067
作品 0
程序员
搭建我的网站的mobile版的开发环境

image.png 之前我已经搭建过一个开发移动web的react开发环境,在那时我就已经想把我的极客教程弄一个手机上体验好的web app,无奈公司业务太多,整天忙着赶项目,下班回去的时候疲惫不堪,已...

极客教程
2017/10/09
0
0
React Router v4相关

最近在用react router v4,记录一下 基本配置 结合Antd Mobile的 TabBar 主要想法就是TabBar调的页面不用上路由,直接就组件的切换,固定为路由 image.png 各个分页面的里面页面分别搞路由 然...

治电小白菜
03/19
0
0
少写css, 早下班! Antd完成todo-list样式布局

Antd是一个UI组件库, 与React非常搭 善用UI库, 可以节省写css样式的时间 如果我们把写css的时间压缩一大半, 或许就可以早点下班了~ 关于Antd Antd官网 Antd Github地址: https://github.com/...

木子昭
07/12
0
0
如何在Angular6下使用ng-zorro-antd

ng-zorro-antd 受限于 #10430 一直都未发布 Angular6 版本,虽然早已经准备好 #1404。 这里的原因是多重的,antd 的 less 版本需要 JavaScript 的支持,想当初我有想把它转成 Scss 版本,看到...

cipchk
05/29
0
0
code-rhythm:写了个vscode扩展,让代码更有快感

项目地址 Github - onvno/code-rhythm 原因 写代码本身是件快乐的事情,但开发中总有各种烦恼。 有时候一个很简单的方法,因为不确定传参的形式,不确定返回形式,不确定具体用法,就得翻墙,...

onvno_
06/07
0
0
【译】Ant Design 3.0 驾到

原文地址:Announcing Ant Design 3.0 原文作者:Meck 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-m… 译者:木羽zwwill 校对者:Usey95、 swants Ant Design 3.0 驾到 An...

木羽zwwill
2017/12/07
0
0
关于antd的icon字体图标的扩展

在做一个由dva+antd构成的前端项目的时候,在使用antd的Icon组件的时候,由于其自带的字体图标无法满足需要,所以要进行扩展。现在把扩展过程分为几个步骤: 1.需要在icon官方资源库中建立一...

少不读水浒
04/13
0
0
React性能优化

一. duplicate code 项目技术栈: view :用的是基于react的 antd + ltcrm-component。 数据流: reflux 路由: react-router 打包:atool-build 由于使用了atool-build导致无法使用webpack...

-鹏
2016/06/21
1K
0
基于React和Antdesign的登录

不洗碗工作室-wangpeng ### 脚手架选择 选择不洗碗工作室的react脚手架 打开其中的React-Route4在终端输入 会根据package.json安装必要的依赖 再安装Ant design 其中--save将把antd自动加...

不洗碗工作室
01/22
0
0
react-webpack-antd--环境篇

Tips [React Error]: Target container is not a DOM element 原因: 在 index.html中将绑定的js文件写在了header中,在渲染组件时需要找到页面上的根节点去渲染 ,绑定在header中还没有根节点...

jdkwky
04/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Git GUI Client

Git GUI Client

qwfys
5分钟前
0
0
SpringBoot | 第九章:Mybatis-plus的集成和使用

前言 本章节开始介绍数据访问方面的相关知识点。对于后端开发者而言,和数据库打交道是每天都在进行的,所以一个好用的ORM框架是很有必要的。目前,绝大部分公司都选择MyBatis框架作为底层数...

oKong
9分钟前
2
0
win10 上安装解压版mysql

1.效果 2. 下载MySQL 压缩版 下载地址: https://downloads.mysql.com/archives/community/ 3. 配置 3.1 将下载的文件解压到合适的位置 我最终将myql文件 放在:D:\develop\mysql 最终放的位...

Lucky_Me
15分钟前
1
0
linux服务器修改mtu值优化cpu

一、jumbo frames 相关 1、什么是jumbo frames Jumbo frames 是指比标准Ethernet Frames长的frame,即比1518/1522 bit大的frames,Jumbo frame的大小是每个设备厂商规定的,不属于IEEE标准;...

问题终结者
29分钟前
1
0
expect脚本同步文件expect脚本指定host和要同步的文件 构建文件分发系统批量远程执行命令

expect脚本同步文件 在一台机器上把文件同步到多台机器上 自动同步文件 #!/usr/bin/expectset passwd "123456"spawn rsync -av root@192.168.133.132:/tmp/12.txt /tmp/expect {"yes...

lyy549745
30分钟前
0
0
36.rsync下 日志 screen

10.32/10.33 rsync通过服务同步 10.34 linux系统日志 10.35 screen工具 10.32/10.33 rsync通过服务同步: rsync还可以通过服务的方式同步。那需要开启一个服务,他的架构是cs架构,客户端服务...

王鑫linux
38分钟前
0
0
matplotlib 保存图片时的参数

简单绘图 import matplotlib.pyplot as pltplt.plot(range(10)) 保存为csv格式,放大后依然很清晰 plt.savefig('t1.svg') 普通保存放大后会有点模糊文件大小20多k plt.savefig('t5.p...

阿豪boy
43分钟前
1
0
java 8 复合Lambda 表达式

comparator 比较器复合 //排序Comparator.comparing(Apple::getWeight);List<Apple> list = Stream.of(new Apple(1, "a"), new Apple(2, "b"), new Apple(3, "c")) .collect(......

Canaan_
昨天
0
0
nginx负载均衡

一、nginx 负载均衡 拓扑图: 主机信息: 1、负载均衡器1(lb1):192.168.10.205 RHEL7.5 2、负载均衡器2(lb2):192.168.10.206 RHEL7.5 3、web服务器1(web01):192.168.10.207 Centos...

人在艹木中
昨天
0
0
做了一个小网站

做了一个小网站 www.kanxs123.com

叶落花开
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部