在vue-cli中配置屏幕自适应的方法

首先，我们需要安装flexible库．

npm i lib-flexible --save

在index.html文件当中配置meta标签,

<meta name="viewport" content="width=device-width, initial-scale=1.0">

借助px2rem工具

npm i px2rem-loader --save-dev

然后就是配置这个工具，由于是loader文件，所有的loader文件都是在until.js文件里的一个方法生成的．

我们只要在until.js里找到cssLoader这个对象，在它下面再加一个px2remLoader对象即可

然后放到下面的generateLoaders函数中loaders数组中

这样就配置完成了，之后重启项目，我们只需要在设计稿里量到多少写多少了！

vue-cli中配置屏幕自适应（px2rem）的更多相关文章

  1. css中添加屏幕自适应方法（rem）

    css中添加屏幕自适应方法(rem) 只需要在公共css文件中添加下面代码:设计稿以750px,基础字体为20px为例,兼容性高,使用过程中px转化为rem即可 /*竖屏*/ @media scree ...

  2. vue cli 中关于vue.config.js中chainWebpack的配置

    Vue CLI  的官方文档上写:调整webpack配置最简单的方式就是在vue.config.js中的configureWebpack选项提供一个对象. Vue CLI 内部的 webpack 配置 ...

  3. vue-cli脚手架里如何配置屏幕自适应

    很多同学可能在写h5的时候,也会遇到移动端如何控制屏幕自适应问题!在移动端网页开发中,我们可以用手机淘宝的flexible．那么在vue当中,也同样可以用!接下来就介绍下如何在vue-cli配置的项目 ...

  4. Vue Cli 中使用 Karma / Chrome 执行样式相关单元测试

    在 GearCase 开源项目 中,我使用了 Vue Cli 的默认测试框架.因此和样式相关的东西,都无法进行测试.因为它并不类似于无头浏览器,而是存在于虚拟内存之中. 现状 在如下 button.s ...

  5. vue cli中的env详解

    前言 相信使用过 vueCli 开发项目的小伙伴有点郁闷,正常开发时会有三个接口环境(开发,测试,正式),但是 vueCli 只提供了两种 development,production(不包含 tes ...

  6. @vue/cli的配置知道多少-publicPath,outputDir,assetsDir,indexPath,filenameHashing,configureWebpack,productionSourceMap

    vue.config.js的简单介绍 vue.config.js 是一个可选的配置文件, 在项目的 (和 package.json 同级的) 根目录中存在这个文件. 默认情况没有这个文件需要我们手动去 ...

  7. 在VUE应用中配置ESLint(代码检查)

    eslint配置方式 注释配置:使用js注释来直接嵌入ESLint配置信息到一个文件里 配置文件:使用一个js文件,JSON或者YAML文件来给整个目录和它的子目录指定配置信息.这些配置可以写在一个文 ...

  8. [Vue CLI 3] 配置解析之 parallel

    官方文档中介绍过在 vue.config.js 文件中可以配置 parallel,作用如下: 是否为 Babel 或 TypeScript 使用 thread-loader. 该选项在系统的 CPU ...

  9. [Vue CLI 3] 配置解析之 indexPath

    在 vue.config.js 配置中有一个 indexPath 的配置,我们先看看它有什么用? 用来指定 index.html 最终生成的路径(相对于 outputDir) 先看看它的默认值:在文件 ...

随机推荐

  1. 分形之花篮（Flower Basket）

    这一篇展示的图形与上一篇文章分形之皇冠(Crown)很相似. 核心代码: static void FractalFlowerBasket(const Vector3& vStart, cons ...

  2. selenium在操作隐藏元素时会报错，怎么判断元素是隐藏的？

    首先页面元素隐藏有五种方法: 1. opacity: 0; opacity 属性的意思是设置一个元素的透明度.它不是为改变元素的边界框(bounding box)而设计的.这意味着将 opacity ...

  3. winform执行程序报错：已停止工作，windows正在检查该问题的解决方案

    每次运行程序时都会弹出错误框:winform已停止工作,windows正在检查该问题的解决方案 事件查看器错位信息: 错误应用程序名称: TMS_winform.exe,版本: 1.0.0.0,时间戳 ...

  4. PowerDesigner的Name和Code不同步设置

    1.“Tools”->"GeneralOptions"(最下方) 2.“Dialog”(左侧列表选第2个) 3.“Name to Code mirroring”的勾去掉

  5. hangfire的使用

    1.安装: hangfire包.StackExchange.Redis(abp下的hangfire则安装abp.hangfire) 2.配置 startup文件configuration方法添加以下代 ...

  6. 20164317 《网络对抗技术》Exp6 信息搜集与漏洞扫描

    Exp6 信息搜集与漏洞扫描 一.原理与实践说明 (1)实践原理 信息搜集:渗透测试中首先要做的重要事项之一,搜集关于目标机器的一切信息 间接收集 DNS记录扫描和枚举 CorpWatch:auxil ...

  7. ubuntu16搭建harbor镜像库

    参考 https://blog.csdn.net/qq_35720307/article/details/86691752 目的:搭建本地镜像库,方便快速的存放和拉取需要的镜像文件.

  8. D15——C语言基础学PYTHON

    C语言基础学习PYTHON——基础学习D15 20180926内容纲要: 1.CSS介绍 2.CSS的四种引入方式 3.CSS选择器 4.CSS常用属性 5.小结 6.练习 1 CSS介绍 层叠样式表 ...

  9. python批量拷贝文件

    普通批量拷贝文件 import os import shutil import logging from logging import handlers from colorama import Fo ...

  10. 实验1 C语言开发环境使用和数据类型、运算符、表达式

    ♦ 实验结论 PART 1 验证性内容 问题: 1.结尾没有加“:”时回车到下一行的时候再输入下一行的语言首字对齐方式会发生变化,可以对上一行进行检查. (这一点需要在不同软件里面试一下,在机房里的软 ...