最近一个需要用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. STM32的SPI口的DMA读写[原创www.cnblogs.com/helesheng]

    SPI是我最常用的接口之一,连接管脚仅为4根:在常见的芯片间通信方式中,速度远优于UART.I2C等其他接口.STM32的SPI口的同步时钟最快可到PCLK的二分之一,单个字节或字的通信时间都在us以 ...

  2. POJ2955 Brackets (区间DP)

    很好的区间DP题. 需要注意第一种情况不管是否匹配,都要枚举k来更新答案,比如: "()()()":dp[0][5]=dp[1][4]+2=4,枚举k,k=1时,dp[0][1]+ ...

  3. C++/python求哈希值(SHA256)

    发现一个很奇怪的现象: python语言求哈希值所用时间竟然比C++少: C++ code 1 #include "stdafx.h" 2 #include <windows ...

  4. A-卷积网络压缩方法总结

    卷积网络的压缩方法 一,低秩近似 二,剪枝与稀疏约束 三,参数量化 四,二值化网络 五,知识蒸馏 六,浅层网络 我们知道,在一定程度上,网络越深,参数越多,模型越复杂,其最终效果越好.神经网络的压缩算 ...

  5. html点击a标签弹窗QQ聊天界面

    以为很难.以为要第三方.谁知道不用.一句话的事情. 1 <a hfer="tencent://message/?uin=12345&Site=&Menu-=yes&qu ...

  6. SpringBoot内置工具类,告别瞎写工具类了

    不知大家有没有注意到,接手的项目中存在多个重复的工具类,发现其中很多功能,Spring 自带的都有.于是整理了本文,希望能够帮助到大家! 一.断言 断言是一个逻辑判断,用于检查不应该发生的情况 Ass ...

  7. 6.-Django设计模式及模版层

    一.MVC (java等其他语言) MVC代表Model-view-Contorller(模型-视图-控制器)模式 M模型层主要用于对数据库层的封装 V视图层用于向用户展示结果 C控制器用于处理请求. ...

  8. 如何免安装使用 Python?推荐 17 个在线的 Python 解释器!

    作者:Al Sweigart 译者:豌豆花下猫@Python猫 英文:https://inventwithpython.com/blog/2022/10/30/17-online-python-ide ...

  9. docker常用配置以及命令

    1. Docker基本概念 1.1 什么是 docker hub DockHub是一个仓库 https://hub.docker.com/ 仓库是集中存放镜像文件的场所 仓库分为公开仓库(Public ...

  10. perl中ENV的使用

    在打印环境变量的时候可以用到.实际上是%ENV,perl中的哈希变量,里面保存的是环境变量.键是环境变量名,值是环境变量值.例如,有一个环境变量是PATH,其值为C:\windows,那么,打印这个环 ...