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

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

  1. npm i lib-flexible --save

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

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

借助px2rem工具

  1. 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. JS原生事件处理（跨浏览器）

    一.关于获取事件对象 FF有点倔强,只支持arguments[0],不支持window.event.这次真的不怪IE,虽然把event作为window的属性不合规范,但大家都已经默许这个小问题存在了, ...

  2. C# 日志输出工具库—log4net 安装、配置及简单应用

    1.下载和安装 注意每次安装只是安装到本项目中,换了另一个项目需要再次安装和配置. 我使用的是Visual Studio 2013 社区版,在tools中找到NuGet包管理. 搜索log4net并点 ...

  3. Windows核心编程：第7章 线程调度、优先级和关联性

    Github https://github.com/gongluck/Windows-Core-Program.git //第7章 线程调度.优先级和关联性.cpp: 定义应用程序的入口点. // # ...

  4. .NET 证书加密 存储保存 IIS授权

    最近接到一个任务,加密DotNet项目的配置文件.配置文件里需要加密的地方一共有两块,一个是数据库连接字符串,一个是自定义的所有AppSettings. 一开始接到这个任务我是拒绝的,因为压根不知道怎 ...

  5. Oracle.ManagedDataAccess.Client.OracleException:“ORA-00936: 缺失表达式”

    static void Main(string[] args) { string sql = "insert into StudentC(Stuid, Stuname, Stupass) v ...

  6. openvSwitch tunnel

    ovs tunnel 实验拓扑 实验拓扑搭建基础脚本 #vbox虚拟机1 ip netns add left ip link add name veth1 type veth peer name sw ...

  7. 关于ajax访问webservice查询数据量稍微大一点，就会返回error500的解决方案

    只需要在web.config的configeration节点中增加如下子节点即可: <system.web.extensions>       <scripting>      ...

  8. [NOI2018]你的名字（后缀自动机+线段树合并）

    看到题目名字去补番是种怎么样的体验 我只会 \(68\) 分,打了个暴力.正解看了一会儿,发现跟 \([HEOI2016/TJOI2016]\) 字符串很像,用线段树合并维护 \(endpos\) 集 ...

  9. Java内存溢出问题总结

    使用Java那么久,在此总结一下Java中常见的内存溢出问题以及对应的解决思路 堆溢出 报错信息 java.lang.OutOfMemoryError: Java heap space 报错原因 堆中 ...

  10. Network - Tips

    001 - 查询whois 可通过在线工具进行查询: https://www.whois365.com http://whois.aliyun.com http://whois.chinaz.com ...