antd-mobile使用

最新推荐文章于 2025-04-14 22:26:17 发布

weixin_33871366

最新推荐文章于 2025-04-14 22:26:17 发布

阅读量1.1k

点赞数

文章标签： python webpack ViewUI

原文链接：https://my.oschina.net/u/3272730/blog/1526975

版权

本文介绍 antd-mobile 组件库的配置方法，包括如何正确引入组件样式、自定义 SVG 图片的处理方式，以及在不同项目创建工具下 svg 的使用情况对比。此外还涉及全局状态管理和减小打包体积等实用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

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创建的项目中都有效,应该是他们的配置中都有相关的配置).

转载于:https://my.oschina.net/u/3272730/blog/1526975