Html5踩坑记之mandMobile使用小记


Posted in HTML / CSS onApril 02, 2020

Mand Mobile使用小记

mandMobile是滴滴开源的专门面向金融场景的Vue移动端UI组件库(非金融类也可以用),最近我司正在孵化一个金融类产品,本人准备使用。

对初次使用者来说,按照官方文档 来,多少会踩一些坑或者不顺畅,下面是我初次使用之后的总结。另外,本小记也会持续更新,记录使用中的各种问题。如果各位在使用中也遇到了问题,欢迎留言交流,我们一起提bug:smile:哈哈哈。

1. 首先安装

npm i mand-mobile -S

2. 引入

全局引入

如果使用  import { Button } from 'mand-mobile'; 的写法会引入 mand-mobile 下所有的模块.

为了提高提升打包和浏览器下载速度,推荐使用 按需引入

你可以通过以下方式按需引入

import Button from 'mand-mobile/lib/button'
import 'mand-mobile/lib/mand-mobile.css'  // 样式单独引入

这样可以将组件按需引入,但是样式还是全部引入。

更好的方法是使用 插件 babel-plugin-import

安装插件 cnpm i babel-plugin-import --save-dev
使用插件,添加babel.config.js或者.babelrc.js文件,添加以下配置

module.exports = {
    "plugins": [
        ["import", {
          "libraryName": "mand-mobile",
          "libraryDirectory": "lib",
          "style": true              // 文档说无需配置style,可能是默认值为true吧
        }]
    ]
 };

配置之后,你可以直接在项目中这样使用了: import { Button } from 'mand-mobile';

这样组件和样式都是按需引入了,而且相对来说少写了几行代码,如果引入的组件多的情况下配置一下还是比较有用的。

3. 配置postcss.config.js或者.postcssrc.js

module.exports = {
  plugins: [
    require('postcss-pxtorem')({
      rootValue: 75,    // 结果为:设计稿元素尺寸/75
      minPixelValue: 2,  // 小于等于 2 的元素不做处理
      propWhiteList: []
    })
  ]
}

如果想要忽略单个属性不做转化,最简单的方法是在像素单元声明中使用大写PX,例如有些字体不需要转换。至此,项目接入该UI库完成。

4. 如何定制主题

我们有两种方式定制主题:一种是css样式覆盖,一种是样式变量覆盖

第一种方式是我们自己写一套样式主题,然后全局引入,强行覆盖掉原来的样式,稍微有点不太优雅,但是也没什么不可以的。

第二种是文档上介绍的,即覆盖样式变量 ,这种方式需要我们做一些配置:

首先修改 babel.config.js,将libraryDirectory的值改为 "components",components这个文件夹存放的是所有组件。改完之后重新运行,这时候你会发现你的样式都没有了,原因是 components中少了一些东西,可以跟lib文件夹对比一下,例如下图所示是lib文件夹下的而components没有这些,如果这时你加上  import 'mand-mobile/lib/mand-mobile.css'; 样式就可以出现了,但是不能加上它,因为我们要通过覆盖样式变量的方式来定制主题。   

Html5踩坑记之mandMobile使用小记

如何覆盖呢?其实components中的组件是有样式的,只不过这些样式的值都是样式变量,而组件内部并没有引入变量,比如看下Button的源码,它的其中一些样式是这样的

.md-button
  position relative
  display block
  height button-height   // 样式变量
  line-height button-height  // 样式变量
  font-size button-font-size  // 样式变量
  font-weight button-font-weight  // 样式变量
  font-family font-family-normal
  text-align center
  border none
  border-radius button-radius  // 样式变量
  box-sizing border-box

所以我们只需要引入这些变量,样式就可以正常显示了,然后我们通过覆盖这些变量的值就可以改变主题了。关键是我们要如何引入这些变量。

根据文档,首先我们新建自定义主题文件,如 theme.custom.styl, 然后在这里引入样式变量

@import '~mand-mobile/components/_style/mixin/util'
@import '~mand-mobile/components/_style/mixin/theme.components'
@import '~mand-mobile/components/_style/mixin/theme.basic'

// 安装并引入css拓展nib(可选)
@import '~nib/lib/nib/vendor'
@import '~nib/lib/nib/gradients'

引入之后还需配置一下webpack让它在我们的项目中生效,我是用的是vue-cli3,所以在vue.config.js中做如下配置:

module.exports = {
  css: {
    loaderOptions: {
      stylus: {
        import: [resolve(`.src/assets/theme.custom`)]  // 根据你项目的实际情况配置路径
      }
    }
  }
}

这个时候基本上就可以了,但是还有一个样式文件需要引入,就是全局样式,因为是在component文件夹,so这个样式也要我们单独引入进来,在你的入口文件(mian.is)加入以下代码即可

import 'mand-mobile/components/_style/global.styl'

参考

全局样式变量   和 组件样式变量 ,在  theme.custom.styl  中设置这些值,就可以自定义主题了。

5. 项目开始

如果有些属性没有生效,看看是不是UI库版本太低了

6. 小结

其实,总体而言,mandMobile还是相当贴心的,提供的组件也很丰富且灵活,相信它在金融类产品中使用它还是很香的,推荐大家使用,毕竟金融类产品的业务逻辑还是比较复杂的。

 到此这篇关于Html5踩坑记之mandMobile使用小记的文章就介绍到这了,更多相关Html5使用mandMobile内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
基于CSS3实现的几个小loading效果
Sep 27 HTML / CSS
收集的22款给力的HTML5和CSS3帮助工具
Sep 14 HTML / CSS
使用css3制作登录表单的步骤
Apr 07 HTML / CSS
css3 中的新特性加强记忆详解
Apr 16 HTML / CSS
CSS3 实现发光边框特效
Nov 11 HTML / CSS
HTML5之SVG 2D入门6—视窗坐标系与用户坐标系及变换概述
Jan 30 HTML / CSS
html5桌面通知(Web Notifications)实例解析
Jul 07 HTML / CSS
HTML5 Canvas中使用路径描画二阶、三阶贝塞尔曲线
Jan 01 HTML / CSS
HTML5新标签兼容——> 的两种方法
Sep 12 HTML / CSS
html5+css如何实现中间大两头小的轮播效果
Dec 06 HTML / CSS
html5中使用hotcss.js实现手机端自适配的方法
Apr 23 HTML / CSS
详解CSS中的特指度和层叠问题
Jul 15 HTML / CSS
总结html5自定义属性有哪些
Apr 01 #HTML / CSS
详解canvas.toDataURL()报错的解决方案全都在这了
Mar 31 #HTML / CSS
浅谈Html5页面打开app的一些思考
Mar 30 #HTML / CSS
详解HTML5常用的语义化标签
Sep 27 #HTML / CSS
html5 移动端视频video的android兼容(去除播放控件、全屏)
Mar 26 #HTML / CSS
HTML5 Canvas实现放大镜效果示例
Mar 25 #HTML / CSS
HTML5 图片预加载的示例代码
Mar 25 #HTML / CSS
You might like
PHP中fwrite与file_put_contents性能测试代码
2013/08/02 PHP
提高php编程效率技巧
2015/08/13 PHP
PDO实现学生管理系统
2020/03/21 PHP
javascript权威指南 学习笔记之变量作用域分享
2011/09/28 Javascript
网页编辑器ckeditor和ckfinder配置步骤分享
2012/05/24 Javascript
在JavaScript里嵌入大量字符串常量的实现方法
2013/07/07 Javascript
将Datatable转化成json发送前台实现思路
2013/09/06 Javascript
解决css和js的{}与smarty定界符冲突问题的两种方法
2013/09/10 Javascript
jQuery中even选择器的定义和用法
2014/12/23 Javascript
JS取得绝对路径的实现代码
2015/01/16 Javascript
JavaScript框架是什么?怎样才能叫做框架?
2015/07/01 Javascript
javaScript实现复选框全选反选事件详解
2020/11/20 Javascript
vue2.0设置proxyTable使用axios进行跨域请求的方法
2017/10/19 Javascript
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
2018/01/21 jQuery
基于bootstrap页面渲染的问题解决方法
2018/08/09 Javascript
详解Vue 动态组件与全局事件绑定总结
2018/11/11 Javascript
在Vue中使用HOC模式的实现
2020/08/23 Javascript
[01:02:20]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
探寻python多线程ctrl+c退出问题解决方案
2014/10/23 Python
Python基于pygame实现的弹力球效果(附源码)
2015/11/11 Python
Python2.7简单连接与操作MySQL的方法
2016/04/27 Python
Python基于pyCUDA实现GPU加速并行计算功能入门教程
2018/06/19 Python
Python 删除连续出现的指定字符的实例
2018/06/29 Python
解决Pandas的DataFrame输出截断和省略的问题
2019/02/08 Python
如何在Django配置文件里配置session链接
2019/08/06 Python
在python中利用dict转json按输入顺序输出内容方式
2020/02/27 Python
Python 基于jwt实现认证机制流程解析
2020/06/22 Python
python3 简单实现组合设计模式
2020/07/02 Python
中科方德软件测试面试题
2016/04/21 面试题
《兰亭集序》教学反思
2014/02/11 职场文书
红色故事演讲稿
2014/05/22 职场文书
新闻编辑专业自荐信
2014/07/02 职场文书
消防志愿者活动方案
2014/08/23 职场文书
车间质检员岗位职责
2015/04/08 职场文书
分享五个Node.js开发的优秀实践 
2022/04/07 NodeJs
html,css,javascript是怎样变成页面的
2023/05/07 HTML / CSS