vue-cli2用px2rem实现响应式布局

最新推荐文章于 2025-05-26 08:21:02 发布

原创

最新推荐文章于 2025-05-26 08:21:02 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue-cli2+px2rem实现响应式布局 #Vue

本文介绍了如何在基于Vue CLI2的项目中利用px2rem和lib-flexible实现响应式布局。主要步骤包括：1) 安装lib-flexible；2) 在main.js中引入；3) 更新index.html；4) 安装px2rem-loader；5) 配置px2rem-loader在utils.js中；6) 对px2remLoader进行进一步配置，并启动项目。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这是我公司项目，需求：使用vue-cli2.9+px2rem实现响应式布局

废话少说，直接上例子吧！
第一步：命令行安装 lib-flexible

npm install lib-flexible --save

第二步：在项目main.js中导入

import 'lib-flexible'

第三步：在项目index.html中加入如下代码

<meta name="viewport" content="width=device-width, initial-scale=1.0">

我用webstorm开发，脚手架生成的项目自带这行代码

第四步：命令行安装px2rem-loader

npm install px2rem-loader --save-dev

第五步：需要配置px2rem-loader
在项目build文件夹里，找到utils.js文件夹，把px2remLoader写入

  const cssLoader = {
    loader: 'css-loader',
    options: {
      sourceMap: options.sourceMap
    }
  }

  const postcssLoader = {
    loader: 'postcss-loader',
    options: {
      sourceMap: options.sourceMap
    }
  }

  const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 75
    }
  }

第六步：接着还是配置px2remLoader，再找到以下代码