最近一个需要用nuxt框架实现的pc自适应项目，从网上找了很多资料，最终完美实现

一、下载相关插件

npm i lib-flexible -S
npm i px2rem-loader -D
npm install postcss-px2rem save

二、在plugins文件下新建 lib-flexible.js文件  引入 lib-flexible

三、因为是pc端自适应，所以在 node_modules 文件夹下找到 lib-flexible文件中的 flexible.js

四、在nuxt.config.js 中配置

plugins: [

    {src:'@plugins/lib-flexible.js',ssr:false}

],

　build: {
    postcss: [
      require('postcss-px2rem')({
        remUnit: 192  // 之所以写192是因为设了pc最大宽度1920px
      })
    ],
  }

 好了，大功告成！！！

nuxt.js中引入lib-flexible 和 postcss-px2rem 实现pc自适应的更多相关文章

  1. 在 Node.js 中引入模块：你所需要知道的一切都在这里

    本文作者:Jacob Beltran 编译:胡子大哈 翻译原文:http://huziketang.com/blog/posts/detail?postId=58eaf471a58c240ae35bb ...

  2. js中引入js

    第一个js文件(被引入的js文件),文件名one.js,内容如下 function alertInOne(){    alert('in one');} 第二个js文件,文件名two.js,内容如下 ...

  3. vue.js中引入图片

    vue中引入图片 前言:vue中引入图片时,会显示不出来,除非在css中引入.而在template中或者js动态引入时,会显示不出图片. 解决一 图片通过后端返回引入网络图片路径即可. <div ...

  4. Nuxt.js中scss公用文件(不使用官方插件style-resources)

    项目多多少少应该都遇到有公用文件这种情况,比如说偶尔某一天产品来找你,能不能明天把网站的这个颜色给我改下?第二天再来给我换回来? 如果再css2.x时代,不使用css预处理技术,这一改只能“查找替换” ...

  5. webpack配置less以及js中引入的图片问题

    1.问题重现 当我做了这个配置以后,发现less里的图片可以正常展现到页面,但是js里的图片以及其他文件都不能正常展现,都报404 原始配置如下: // 如果有額外的.babelrc配置的話就可以使用 ...

  6. nuxt.js中登录、注册（密码登录和手机验证码登录）

    <!-- 登录弹框 --> <div class="mask" v-show="flag"> <div class="m ...

  7. vue.js中引入其他文件export的方法：

    import {GetPosition} from '../../lib/utils'  //找到 该方法的文件路径,然后 用{}拿到 该方法 var position =GetPosition(); ...

  8. 如何正确在IDEA 里maven构建的项目中引入lib的jar包（图文详解）

    不多说,直接上干货! 问题详情 以下是我,maven构建出来的最新spark2.2.0-bin-hadoop2.6的项目. 有些依赖包,maven还是无法一次性满足,所以,得手动加入lib的jar包. ...

  9. 关于vue项目中在js中引入图片问题

    <template> <div> <img v-for="(star,index) in stars" :src="star.src&quo ...

随机推荐

  1. 云原生强大且灵活的持续集成CI开源框架Tekton实战-上

    @ 目录 概述 定义 常见CICD工具 使用好处 组件 基本概念 安装 前提条件 安装Tekton Pipelines 创建并运行任务 安装Dashboard 安装Cli Pipelines示例演示 ...

  2. printf-库函数重定向、重载

    重定向:这是针对标准C语言语法来讲,指的是我们可以重新声明库函数并定义库函数的执行体 重载:这是CPP引入的新特性,即根据函数不同参数个数或参数类型来对同一函数名进行不同定义 C和CPP对重定向处理机 ...

  3. MYSQL-->函数与约束条件

    函数 用法 函数最常用的地方就是查询语句处 select 函数(字段) from 表名; select 字段列表 from 表名 group by 分组字段 having 函数(字段); 字符串函数( ...

  4. springboot+thymeleaf中前台页面展示中、将不同的数字替换成不同的字符串。使用条件运算符

    主要用到的知识就是thyme leaf中的条件运算符 表达式:(condition)?:then:else 当条件condition成立时返回then.否则返回else 具体代码:<td th: ...

  5. 网络工程知识（二）VLAN的基础和配置：802.1q帧；Access、Trunk、Hybrid接口工作模式过程与配置；VLANIF的小实验

    介绍-VLAN VLAN(Virtual Local Area Network)即虚拟局域网,工作在数据链路层. 交换机将通过:接口.MAC.基于子网.协议划分(IPv4和IPv6).基于策略的方式划 ...

  6. C语言二叉树遍历及路径查找

    #include<iostream> #include<stdio.h> #include<math.h> #include<malloc.h> usi ...

  7. LabVantage仪器数据采集方案

    LabVantage的仪器数据采集组件为LIMS CI,是一个独立的应用程序/服务,实现仪器数据的采集(GC.LC等带有工作站的仪器). 将仪器输出数据转换为LIMS所需数据并传输,使用Talend这 ...

  8. ML-梯度下降法的详细推导与代码实现

    计算 对于线性回归,梯度下降法的目标就是找到一个足够好的向量\(\theta\),使代价函数\(J(\theta) = \sum_{i=1}^{m}(\hat{y}-y_{i})^{2}\)取得最小值 ...

  9. yaml使用

    yml使用 安装yaml pip install PyYaml yaml基本规则 # 1.大小写敏感 # 2.使用缩进表示层级关系, # 2.1 不能使用tab进行缩进,只能使用空格 # 2.2 缩进 ...

  10. DNS 解析 prefeath

    本文将详细介绍DNS预解析prefetch的主要内容 概述 DNS(Domain Name System, 域名系统),是域名和IP地址相互映射的一个分布式数据库.DNS 查询就是将域名转换成 IP ...