vue 使用lib-flexable,px2rem 进行移动端适配 但是引入的第三方UI组件 vux 的样式缩小,解决方案...
最近在写移动端项目,就想用lib-flexable,px2rem来进行适配,把px转换成rem但是也用到了第三方UI组件库vux,把这个引入发现一个问题就是vux的组件都缩小了,在网上找不到答案,最后在一个vue开发群里找到了解决的方法,目前的处理方法是将vux组件中px转化为PX,避免被转成rem
在webpack.base.conf.js中 vuxLoader中配置以下代码
{name: 'vux-ui'
},
{name: 'after-less-parser',fn: function (source) {if (this.resourcePath.replace(/\\/g, '/').indexOf('vux/src/components') > -1) {source = source.replace(/px/g, 'PX')}// 自定义的全局样式大部分不需要转换if (this.resourcePath.replace(/\\/g, '/').indexOf('App.vue') > -1) {source = source.replace(/px/g, 'PX').replace(/-1PX/g, '-1px')}return source}
},
{name: 'style-parser',fn: function (source) {if (this.resourcePath.replace(/\\/g, '/').indexOf('vux/src/components') > -1) {source = source.replace(/px/g, 'PX')}// 避免转换1PX.less文件路径if (source.indexOf('1PX.less') > -1) {source = source.replace(/1PX.less/g, '1px.less')}return source}
}
如果是使用cnpm的 就需要把/vux/components那段 要改成vux/components
使用vue-cli 3.x的,在vue.config.js 配置以下代码
configureWebpack: config => {require('vux-loader').merge(config, {plugins: [{name: 'vux-ui'},{name: 'after-less-parser',fn: function (source) {if (this.resourcePath.replace(/\\/g, '/').indexOf('/vux/src/components') > -1) {source = source.replace(/px/g, 'PX')//资源中有引入1px.less文件的,上面也会将文件名替换成1PX.less,所以要替换回来避免构建报错source = source.replace(/1PX.less/g,'1px.less');}// 自定义的全局样式大部分不需要转换return source}},{name: 'style-parser',fn: function (source) {if (this.resourcePath.replace(/\\/g, '/').indexOf('/vux/src/components') > -1) {source = source.replace(/px/g, 'PX')source = source.replace(/1PX.less/g,'1px.less');}return source}}]})
}
来源
** https://github.com/airyland/v... , 此方法是vux作者提供的解决方法
vue 使用lib-flexable,px2rem 进行移动端适配 但是引入的第三方UI组件 vux 的样式缩小,解决方案...相关推荐
- vue-cli3.0结合lib-flexible、px2rem实现移动端适配,完美解决第三方ui库样式变小问题
vue-cli3.0结合lib-flexible.px2rem实现移动端适配,完美解决第三方ui库样式变小问题 参考文章: (1)vue-cli3.0结合lib-flexible.px2rem实现移动 ...
- vue项目中使用lib-flexible解决移动端适配
第一部分:项目中引入lib-flexible 一.项目中安装lib-flexible $ npm install lib-flexible --save 二.在项目的入口js文件中引入lib-flex ...
- vue使用lib-flexible和postcss-px2rem-exclude解决移动端适配问题
一.rem介绍 rem是CSS3新增的一个相对单位(root em,根em),这个单位引起了广泛关注.这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是H ...
- 各种第三方UI组件的引入(Vue)
主流组件UI在Vue中详细引入方法 Bootstrap ElementUI Bootstrap 方法一:在main.js中引入 npm i jquerynpm i bootstrap 在main.js ...
- 如何在Vue项目中使用vw实现移动端适配(转)
有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...
- 仿掘金 Vue+Express+mysql 开源项目,多端适配
仿掘金博客网站 最近闲来无事,想着练一个项目,顺带给自己写一个博客网站,于是便仿照掘金官网写了一个练练手 网站基于vue3.0 + element 开发的响应式项目 适配PC与wap端 在线地址 后台 ...
- 【vue】如何在Vue项目中使用vw实现移动端适配(转)
有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...
- 转:如何在Vue项目中使用vw实现移动端适配
https://www.w3cplus.com/mobile/vw-layout-in-vue.html 有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flex ...
- html px2rem转化器,【技术】移动端适配 px2rem/px2vw 的原理与实现
简介 [目标]:前端开发移动端及H5时候,不需要再关心移动设备的大小,只需要按照固定设计稿的px值布局! [基础] dpr(设备像素比) css的像素px不等于设备像素/分辨率/各种值,css的px可 ...
最新文章
- vue dplayer 加载失败_最新vue脚手架项目搭建,并解决一些折腾人的问题
- spring页面使用注解@RequestParam把请求参数封装到map中
- (四) Docker 常用帮助命令
- css滚动到顶部自动固定
- Java项目源码小微信程序第四期前台+后台相结合的水果商城系统
- ffmpeg多路同时推流
- matlab相对误差均值计算公式,相对误差怎么算_平均相对误差怎么计算公式
- Silvaco TCAD介绍
- 利用mimikatz查看rdp连接密码【渗透测试】
- 做成才还是做许三多——反思程序员职场生涯规划
- 电脑连接WiFi,浏览器打不开网页
- koa2 mysql sequelize_[转]使用nodejs-koa2-mysql-sequelize-jwt 实现项目api接口
- 哪款mac写python_新款Mac Pro有几个圈圈?写几行Python数一下
- 好友列表页面java_怎样制作QQ好友列表的界面?
- 渗透实战-JSP上传webshell报错500
- 2023年JAVA JDK8的安装与配置(附JAVA8安装包)
- ROS1/2 机器人编程实践汇总 kinetic/melodic/noetic foxy/galactic/humble
- CODING 敏捷实战系列课第一讲:正本清源——敏捷的为什么
- python培训实习报告
- IOS学习之关于导航那些事
热门文章
- 了解Android中的meta-data及其应用
- 行业 平均年龄_2019中国“新生力”白皮书:平均年龄35岁,千万资产家庭达198万户!...
- window.open在Safari中不能打开
- python使用gevent实现协程
- SpringBoot+mongoDB实现id自增
- linux下卸载自带的JDK和安装想要的JDK
- 关于tcp、http可能你想知道的那些事
- 2.aop中几个注解的含义
- Difference between prop and attr in different version of jquery
- 2016.07.13-vectorvectorint应用2——Two Sum扩展