如何在Html5中使用mandMobile

　　介绍

如何在Html5中使用mandMobile ?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。

<强> 1。首先安装

npm 小姐:mand-mobile  s

2。引入

全局引入

如果使用,<代码>进口{按钮}& # 39;mand-mobile& # 39;;>

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

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

import  Button 得到& # 39;mand-mobile/lib/按钮# 39; 　　import  & # 39; mand-mobile/lib/mand-mobile.css& # 39;,,//,样式单独引入

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

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

安装插件<代码> cnpm我babel-plugin-import——save-dev
使用插件,添加babel.config.js或者.babelrc。js文件,添加以下配置

module.exports =, { 　　,,,“plugins":, 　　,,,,,,,(“import",, { 　　,,,,,,,,,“libraryName":,“mand-mobile" 　　,,,,,,,,,“libraryDirectory":,“lib" 　　,,,,,,,,,“style":, true ,,,,,,,,,,,,,//,文档说无需配置风格,可能是默认值为真正的吧 　　,,,,,,,}] 　　,,,) 　　,},

配置之后,你可以直接在项目中这样使用了:<代码>进口{按钮}& # 39;mand-mobile& # 39;;

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

<强> 3。配置postcss.config.js或者.postcssrc。js

module.exports =, { 　　插件才能:, 　　,,,需要(& # 39;postcss-pxtorem& # 39;) ({ 　　,,,,,rootValue:, 75,,,,,//,结果为:设计稿元素尺寸/75 　　,,,,,minPixelValue:,,,,//,小于等于,2,的元素不做处理 　　,,,,,propWhiteList:, [] 　　,,,}) 　　,,) 　　}

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

<强> 4。如何定制主题

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

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

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

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

如何在Html5中使用mandMobile

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

.md-button 　　position 才能相对的 　　display 才能;块 　　height 才能;button-height ,,//,样式变量 　　line-height 才能;button-height ,//,样式变量 　　font-size 才能;button-font-size ,//,样式变量 　　font-weight 才能;button-font-weight ,//,样式变量 　　font-family  font-family-normal才能 　　text-align 才能;中心 　　border 才能;没有 　　border-radius 才能;button-radius ,//,样式变量 　　box-sizing 才能border-box

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

根据文档,首先我们新建自定义主题文件,如<代码> theme.custom。styl> @import  & # 39; ~ mand-mobile/组件/_style/混合/util # 39; 　　@import  & # 39; ~ mand-mobile/组件/_style/混合/theme.components& # 39; 　　@import  & # 39; ~ mand-mobile/组件/_style/混合/theme.basic& # 39;//,安装并引入css拓展nib(可选) 　　@import  & # 39; ~ nib/lib/nib/供应商# 39; 　　@import  & # 39; ~ nib/lib/nib/梯度# 39;

如何在Html5中使用mandMobile