详解Vue-cli webpack移动端自动化构建rem问题


Posted in Javascript onApril 07, 2018

相信很多小伙伴想着自己的移动端项目能够自动转换为rem,这才符合前端的潮流,如果用自己手写或者编辑器插件来改动十分不方便还容易出错,我在网上找了很多的方法发现以下问题:

1 照着老的视频教程去弄,发现node npm webpack px2rem的各种插件版本都不一样,根本没用

2 网上的教程缺斤少俩,不完整,搞得我整了半天搞不定,想想干脆手动vscode 的cssrem设置算了,但老子还是不服气,东拼西凑还是整出来了,最后还是研究出了以下方法希望对大家的移动端自动化构建rem有帮助

1 安装vue-cli这个就不多说了,大家都应该会

2 安装和配置px2rem-loader(这里没有用postcss试过了很多问题还是决定用这个)

第一步 :npm install px2rem-loader

第二部 : webpack.base.conf.js下添加对象,这里我用的是sass,用其他的按照下面规律改就行了,相信都看得懂

module.exports={
module: {
  rules: [
   {
    test: /\.(css|less|scss)(\?.*)?$/,
    loader: 'style-loader!css-loader!sass-loader!less-loader!postcss-loader'
   }
  ]
 }
}

第三步 : webpack.dev.conf.js下的plugins添加一个东西,大家一定要注意remUnit这个属性,就是在苹果5情况下为40px,我这里定为40,也有人定为80,我这里40是为了配合hotcss使用下面我会讲到

plugins: [
  new webpack.LoaderOptionsPlugin({
   // webpack 2.0之后, 此配置不能直接写在自定义配置项中, 必须写在此处
   vue: {
    postcss: [require('postcss-px2rem')({ remUnit: 40, propWhiteList: [] })]
   }
  }
 ]

第四部 : 这是多人不知道的,很多人就是差这一步,utils.js下找到const cssLoader加上?importLoaders=1

const cssLoader = {
  loader: 'css-loader?importLoaders=1',
  options: {
   minimize: process.env.NODE_ENV === 'production',
   sourceMap: options.sourceMap
  }
 }

到这里为止安装就完成了

输入font-size:40px

输出font-size:1rem (在iphone下)

3 我们都知道设备的像素比不一样的,所以我们用hotcss来调整设备的像素比 链接

我放在了src/assets/js/里面大家可根据习惯来

引入方法,自己定义什么名字都行,这里我吧hotcss.js改为了viewport.js

module.exports = {
 entry: {
  app: './src/main.js',
  rem: './src/assets/js/viewport.js'
 }
}

这样就大功告成啦

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
解放web程序员的输入验证
Oct 06 Javascript
用javascript实现的支持lrc歌词的播放器
May 17 Javascript
js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装
May 15 Javascript
javascript截取字符串小结
Apr 28 Javascript
JS/Jquery判断对象为空的方法
Jun 11 Javascript
详解javascript事件冒泡
Jan 09 Javascript
Node.js连接postgreSQL并进行数据操作
Dec 18 Javascript
JS调用Android、Ios原生控件
Jan 06 Javascript
微信小程序实现自上而下字幕滚动
Jul 14 Javascript
vue路由--网站导航功能详解
Mar 29 Javascript
JavaScript实现公告栏上下滚动效果
Mar 13 Javascript
JavaScript设计模式之观察者模式与发布订阅模式详解
May 07 Javascript
vue-cli开发环境实现跨域请求的方法
Apr 07 #Javascript
Angular5给组件本身的标签添加样式class的方法
Apr 07 #Javascript
Vue实现内部组件轮播切换效果的示例代码
Apr 07 #Javascript
Javascript实现运算符重载详解
Apr 07 #Javascript
Vue中使用Sortable的示例代码
Apr 07 #Javascript
JavaScript实现简单动态进度条效果
Apr 06 #Javascript
js+css实现打字效果
Jun 24 #Javascript
You might like
PHP的宝库目录--PEAR
2006/10/09 PHP
小偷PHP+Html+缓存
2006/12/20 PHP
两千行代码的PHP学习笔记汇总
2014/10/05 PHP
PHP和C#可共用的可逆加密算法详解
2015/10/26 PHP
使用php完成常见的文件上传功能(推荐)
2017/01/13 PHP
PHP手机号中间四位用星号*代替显示的实例
2017/06/02 PHP
PHP实现用户登录的案例代码
2018/05/10 PHP
php设计模式之组合模式实例详解【星际争霸游戏案例】
2020/03/27 PHP
一个JS的日期格式化算法示例
2013/07/31 Javascript
DOM基础教程之使用DOM控制表格
2015/01/20 Javascript
原生js仿jquery实现对Ajax的封装
2016/10/04 Javascript
基于Javascript实现的不重复ID的生成器
2016/12/25 Javascript
详解nodeJS之二进制buffer对象
2017/06/03 NodeJs
理解Koa2中的async&await的用法
2018/02/05 Javascript
微信上传视频文件提示(推荐)
2018/11/22 Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
2019/10/14 Javascript
ZK中使用JS读取客户端txt文件内容问题
2019/11/07 Javascript
vue-cli3自动消除console.log()的调试信息方式
2020/10/21 Javascript
js回到页面指定位置的三种方式
2020/12/17 Javascript
Python采集腾讯新闻实例
2014/07/10 Python
使用Python的Twisted框架编写非阻塞程序的代码示例
2016/05/25 Python
python 从csv读数据到mysql的实例
2018/06/21 Python
Django框架 查询Extra功能实现解析
2019/09/04 Python
基于keras输出中间层结果的2种实现方式
2020/01/24 Python
Html5实现单张、多张图片上传功能
2019/04/28 HTML / CSS
英国灯具和灯泡网上商店:Lights.co.uk
2018/02/02 全球购物
加拿大折扣、优惠券和交易网站:WagJag
2018/02/07 全球购物
ONLY瑞典官网:世界知名服装品牌
2018/06/19 全球购物
荷兰在线钓鱼商店:Raven
2019/06/26 全球购物
有趣、实用和鼓舞人心的产品:Inspire Uplift
2019/11/05 全球购物
创先争优制度
2014/01/21 职场文书
销售人员职业生涯规划范文
2014/03/01 职场文书
党员个人总结自评
2015/02/14 职场文书
pytest进阶教程之fixture函数详解
2021/03/29 Python
Python集合set()使用的方法详解
2022/03/18 Python
Java中API的使用方法详情
2022/04/06 Java/Android