最近一个需要用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. .NET 6 跨服务器联表查询

    一.大家是否有这个需求 1.跨品种查询 :比如 MYSQL和一个SQLSERVER进行联表查询 ,或者SQLITE和MYSQL进行联表查询 2.跨服务器查询 : A服务器和B服务器查询 如果想同时支持 ...

  2. LeNet-论文阅读

    概述 Yann LeCun, Leon Bottou, Yoshua Bengio, and Patrick Haffner的论文<Gradient-Based Learning Applied ...

  3. day45-JDBC和连接池01

    JDBC和连接池01 1.JDBC概述 基本介绍 JDBC为访问不同的数据库提供了同一的接口,为使用者屏蔽了细节问题 Java程序员使用JDBC,可以连接任何提供了jdbc驱动程序的数据库系统,从而完 ...

  4. Linux、Windows下Redis的安装即Redis的基本使用详解

    前言 什么是Redis Redis是一个基于内存的key-value结构数据库.Redis 是互联网技术领域使用最为广泛的存储中间件,它是「Remote Dictionary Service」的首字母 ...

  5. Linux 下配置 hosts 并设置免密登录

    Linux 下配置 hosts 并设置免密登录 作者:Grey 原文地址: 博客园:Linux 下配置 hosts 并设置免密登录 CSDN:Linux 下配置 hosts 并设置免密登录 说明 实现 ...

  6. C语言之走迷宫深度和广度优先(利用堆栈和队列)

    完成以下迷宫 利用二维数组储存每一个数组里的值,若是不能走则为1,若是可行就是0,走过了就设为2. 一般是再复制一个数组,用来记录. 堆栈的思想就是将一个点的上下左右都遍历一遍,若可行进栈,跳出遍历, ...

  7. Codeforces Round #816 (Div. 2)/CodeForces1715

    CodeForces1715 Crossmarket 解析: 题目大意 有一个 \(n \times m\) 的空间,Stanley 需要从左上角到右下角:Megan 则需要从左下角到右上角.两人可以 ...

  8. 3.pygame快速入门-游戏循环及动画实现

    游戏循环的开始,意味着游戏的正式开始,游戏循环的作用如下 1.保证游戏不会直接退出 2.变化图像的位置--动画效果 3.检测用户交互--按键.鼠标等     游戏时钟 pyagame提供了一个pyga ...

  9. 题解 UVA10285 最长的滑雪路径 Longest Run on a Snowboard

    Solution 双倍经验 就是记搜嘛. 搞一个二维数组记录一下当前的最长滑雪路径,其他和普通 dfs 没什么两样. 向 \(4\) 个方向搜索,如果高度符合就 \(+1\) . 多测要注意数组初始化 ...

  10. yum 更新yum源

    yum 更新yum源 # 1.做好备份,防止更新失败时切换回去 $ mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base. ...