在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. 用指定的用户名和密码无法登录到该ftp服务器

    今天在win2008 R2 服务器上默认部署FTP站点时遇到了两个小问题,在网上找了好久资料后发现还是解决不了问题,最终找到问题的原因,在此共享给大家 1.Windows无法访问此文件夹.请确保输入的 ...

  2. HTML超级链接详细讲解

    超级链接是网站中使用比较频繁的HTML元素,因为网站的各种页面都是由超级链接串接而成,超级链接完成了页面之间的跳转.超级链接是浏览者和服务器的交互的主要手段,在后面的技术中会逐步深化学习. —  注意 ...

  3. Android常用库和插件

    下拉刷新 PullLoadMoreRecyclerView 实现RecyclerView下拉刷新和上拉加载更多以及RecyclerView线性.网格.瀑布流效果演示 https://github.co ...

  4. tfs查看最近签入记录及文件

    在团队资源管理=>源代码管理资源管理器=>选择某个最近签入的文件夹=>右键=>查看历史记录=>双击某个文件夹 就能看到最近变更集文件

  5. ASP.NET MVC一次删除多笔记录 V2.0

    前一段时间Insus.NET有写一篇<ASP.NET MVC一次删除多笔记录>http://www.cnblogs.com/insus/p/6241186.html 可以前往去看看. 觉得 ...

  6. C/S,B/S的应用和区别

    ·C/S——客户/服务器模式 特点:非对等相互作用——即客户与服务器出于不平等的地位 表现在:服务器用有客户所不具备的硬件和软件资源以及运算能力,服务器提供服务,客户请求服务. A.客户端与服务器的数 ...

  7. Linux系统软件包的管理(4)

    虽然使用源码编译安装可以具有提高速度个性化的定制等优点,但对于 Linux发行商来说,则不容易管理软件包,毕竟不是每个人都会进行源码编译的,如果能够将软件预先在相同的硬体与系统上面编译好在发布的话,不 ...

  8. 27_网络编程-初识socket

    一.C/S B/S 架构         1.定义             (1)C/S结构,即Client/Server(客户机/服务器)结构,是大家熟知的软件系统体系结构,通过将任务合理分配到Cl ...

  9. spring-boot集成mybatis，用redis做缓存

    网上有很多例子了,执行源码起码有3个,都是各种各样的小问题. 现在做了个小demo,实现spring-boot 用redis做缓存的实例,简单记录下思路,分享下源码. 缓存的实现,分担了数据库的压力, ...

  10. SQL高效查询两个表不同的数据

    逻辑相对复杂,但是速度最快: )