详解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 相关文章推荐
js window.onload 加载多个函数的方法
Nov 02 Javascript
node.js中的fs.writeFile方法使用说明
Dec 14 Javascript
jQuery使用hide方法隐藏页面上指定元素的方法
Mar 30 Javascript
canvas绘制七巧板
Feb 03 Javascript
基于zepto.js实现手机相册功能
Jul 11 Javascript
JS原生数据双向绑定实现代码
Aug 14 Javascript
解决vue-cli3 使用子目录部署问题
Jul 19 Javascript
使用vue 国际化i18n 实现多实现语言切换功能
Oct 11 Javascript
微信小程序如何加载数据库真实数据的实现
Mar 04 Javascript
JS正则表达式常见函数与用法小结
Apr 13 Javascript
在vue中axios设置timeout超时的操作
Sep 04 Javascript
jQuery列表动态增加和删除的实现方法
Nov 05 jQuery
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 list()函数的详解
2013/06/05 PHP
php中curl、fsocket、file_get_content三个函数的使用比较
2014/05/09 PHP
PHP使用MPDF类生成PDF的方法
2015/12/08 PHP
yii分页组件用法实例分析
2015/12/28 PHP
javascript 子窗体父窗体相互传值方法
2010/05/31 Javascript
javascript 词法作用域和闭包分析说明
2010/08/12 Javascript
回车直接实现点击某按钮的效果即触发单击事件
2014/02/27 Javascript
javascript如何判断输入的url是否正确
2014/04/11 Javascript
Jquery常用的方法汇总
2015/09/01 Javascript
jquery实现浮动在网页右下角的彩票开奖公告窗口代码
2015/09/04 Javascript
如何利用Promises编写更优雅的JavaScript代码
2016/05/17 Javascript
jQuery基本选择器(实例及表单域value的获取方法)
2016/05/20 Javascript
浅谈jquery点击label触发2次的问题
2016/06/12 Javascript
浅谈JavaScript 数据属性和访问器属性
2016/09/01 Javascript
使用jquery给指定的table动态添加一行、删除一行
2016/10/13 Javascript
JavaScript中的ajax功能的概念和示例详解
2016/10/17 Javascript
浅析Node.js非对称加密方法
2018/01/29 Javascript
Nodejs实现的操作MongoDB数据库功能完整示例
2019/02/02 NodeJs
详解实现一个通用的“划词高亮”在线笔记功能
2019/04/23 Javascript
vue中el-input绑定键盘按键(按键修饰符)
2020/07/22 Javascript
python 排列组合之itertools
2013/03/20 Python
Django集成百度富文本编辑器uEditor攻略
2014/07/04 Python
Python打印斐波拉契数列实例
2015/07/07 Python
对python PLT中的image和skimage处理图片方法详解
2019/01/10 Python
PyQt4 treewidget 选择改变颜色,并设置可编辑的方法
2019/06/17 Python
下载官网python并安装的步骤详解
2019/10/12 Python
PyCharm中配置PySide2的图文教程
2020/06/18 Python
使用tensorflow进行音乐类型的分类
2020/08/14 Python
用你熟悉的语言写一个连接ORACLE数据库的程序,能够完成修改和查询工作
2012/06/11 面试题
农贸市场管理制度
2014/01/31 职场文书
给校长的建议书100字
2014/05/16 职场文书
我的中国梦演讲稿初中篇
2014/08/19 职场文书
在教室放鞭炮的检讨书
2014/09/28 职场文书
优秀学生干部事迹材料
2014/12/24 职场文书
大学毕业谢师宴致辞
2015/07/27 职场文书
Python编程根据字典列表相同键的值进行合并
2021/10/05 Python