最近一个需要用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. OFD是什么

    OFD是什么? 原文链接:OFD是什么 OFD更多了解:OFD (Open Fixed layout Document/开放版式文档) OFD格式文件介绍 OFD(Open Fixed layout ...

  2. 我是加工厂，想管理生产财务采购销售这块，什么样的ERP会好用点？？

    最能够贴合你的业务需求和自己员工的使用习惯的才会更好用,最好能简单快捷的进行低成本个性化定制的那种应该比较适合你这种加工厂,没有完全相同的两家企业,更别说他们的发展走向,即使同一家企业不同发展阶段.时 ...

  3. 为什么数字化转型离不开 MES 系统？

    确切的说应该是制造业企业的数字化转型离不开MES系统,原因很简单,制造业企业的核心工作是生产制造,做数字化转型就是对生产制造各个环节进行数字化改造,提质增效降成本,而MES系统是制造执行系统,是生产制 ...

  4. Hive之命令

    Hive之命令 说明:此博客只记录了一些常见的hql,create/select/insert/update/delete这些基础操作是没有记录的. 一.时间级 select day -- 时间 ,d ...

  5. Mybatis-Plus自动生成器生成代码基于springboot项目启动

    创建springbootweb项目 pom.xml 导入 MBP 依赖 <dependency> <groupId>com.baomidou</groupId> & ...

  6. 魔改editormd组件，优化ToC渲染效果

    前言 我的StarBlog博客目前使用 editor.md 组件在前端渲染markdown文章,但这个组件自动生成的ToC(内容目录)不是很美观,我之前魔改过一个树形组件 BootStrap-Tree ...

  7. JSP的内置对象 request和response

    文章目录 1.request对象 2.response响应对象 3.out输出对象 4.session会话对象 5.application应用对象 概述 在使用JSP内置对象的时候.不需要先定义这些对 ...

  8. F118校准（二）-- 操作步骤（使用PX01 PG点屏，并使用PX01 PG校准F118）

    1. 准备工作 硬件连接: CA310通过USB线材连接PC PX01通过USB线材连接PC F118通过灰排线连接PX01左上角的GPIO扩展口(如下图所示) LCM连接PX01 启动LcdTool ...

  9. 24.-Django生成csv文件及下载

    一.csv文件定义 逗号分隔值(comma-separated values, csv,有时页称字符分隔值,因为分分隔字符页可以不是逗号),其文件以纯文本形式存储表格数据(数字和文本) 说明:可被常见 ...

  10. 基于LZO的高性能无损数据压缩IP

    LZOAccel-C LZO Data Compression Core/无损数据压缩IP Core LZOAccel-C是一个无损数据压缩引擎的FPGA硬件实现,兼容LZO 2.10标准. Core ...