在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. css中“~”和“>”是什么意思

    p~ul选择器 p之后出现的所有ul. 两种元素必须拥有相同的父元素,但是 ul不必直接紧随 p. css中“>”是: css3特有的选择器,A>B 表示选择A元素的所有子B元素. 与A ...

  2. .NET Core下开源任务调度框架Hangfire的Api任务拓展(支持秒级任务)

    HangFire的拓展和使用 看了很多博客,小白第一次写博客. 最近由于之前的任务调度框架总出现问题,因此想寻找一个替代品,之前使用的是Quartz.Net,这个框架方便之处就是支持cron表达式适合 ...

  3. Flask系列08--Flask中flask_session, redis插件

    一.安装 1.flask_session 不想将Session的信息存放在Cookie 将Session存放在Redis Cookie中保存Session的ID flask中的session是直接将数 ...

  4. Spring 扫描标签<context:component-scan/>

    一. <context:annotation-config/> 此标签支持一些注入属性的注解, 列如:@Autowired, @Resource注解 二. <context:comp ...

  5. .NET Core 从1.1升级到2.0记录（Cookie中间件踩坑）

    .NET Core 2.0 新时代 万众瞩目的.NET Core 2.0终于发布了,原定于9.19的dotnetconf大会的发布时间大大提前了1个月,.NET Core 2.0/.NET Stand ...

  6. 深入字节码理解invokeSuper无限循环的原因

    来一段简单的cglib代码 public class SampleClass { public void test(){ System.out.println("hello world&qu ...

  7. CSS中text-shadow的几个好看的文字demo及其代码

    最近有看到一些镂空的或者立体的文字设计图非常好看,然后想了想,应该是使用text-shadow来实现的,这里我贴出我仿的八个demo,分享给大家 首先是HTML代码 <div class=&qu ...

  8. 优化openfire服务器提升xmpp 效率的15个方法（原创）

    1.禁用原生xmpp搜索,使组织架构.人员数据本地化保存,并使客户端数据同步服务器,降低原生xmpp搜索的iq消耗,因为搜索是im应用的频繁操作: 2.禁用roster花名册.禁用presence包通 ...

  9. sql 导入导出表数据 命令

    那么在我们使用BCP命令之前,我们首先要在Sql Server数据库中执行下列语句,以修改Sql Server的配置,启用对BCP命令的支持. --允许配置高级选项 exec sp_configure ...

  10. jdk1.8一键安装脚本（linux环境）

    1.下载jdk安装包和安装脚本 下载地址:https://pan.baidu.com/s/1bo6ADQ3 其中包括: jdk安装包:jdk-8u151-linux-x64.tar.gz jdk一键安 ...