没有合适的资源?快使用搜索试试~ 我知道了~
Html5踩坑记之mandMobile使用小记
0 下载量 165 浏览量
2020-11-21
15:09:13
上传
评论
收藏 87KB PDF 举报
温馨提示
试读
3页
Mand Mobile使用小记 mandMobile是滴滴开源的专门面向金融场景的Vue移动端UI组件库(非金融类也可以用),最近我司正在孵化一个金融类产品,本人准备使用。 对初次使用者来说,按照官方文档 来,多少会踩一些坑或者不顺畅,下面是我初次使用之后的总结。另外,本小记也会持续更新,记录使用中的各种问题。如果各位在使用中也遇到了问题,欢迎留言交流,我们一起提bug:smile:哈哈哈。 1. 首先安装 npm i mand-mobile -S 2. 引入 全局引入 如果使用 import { Button } from 'mand-mobile'; 的写法会引入 mand-mobil
资源推荐
资源详情
资源评论
Html5踩坑记之踩坑记之mandMobile使用小记使用小记
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文件夹对比一下,例如下图所
资源评论
weixin_38641366
- 粉丝: 4
- 资源: 893
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功