Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)

下面是Vue CLI3移动端适配的完整攻略。

步骤1：创建Vue CLI3项目

首先，你需要创建一个Vue CLI3项目。可以使用如下命令：

vue create my-project

根据提示，选择适合你的选项来搭建基本项目。

步骤2：安装所需插件

安装postcss-px2rem插件：

npm install postcss-px2rem -D

安装lib-flexible插件：

npm install lib-flexible -S

步骤3：配置webpack

在项目根目录下，找到vue.config.js文件（如果没有，请手动创建），修改配置如下:

const px2rem = require('postcss-px2rem');

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          px2rem({
            remUnit: 75 // 1rem = 75px, 设计图尺寸除以10
          })
        ]
      }
    }
  }
}

说明：

remUnit: 75表示1rem的大小为设计图像素除以10，比如设计图宽度为750px，那么就应该设置remUnit: 75。

步骤4：配置index.html

在项目的public/index.html文件中添加如下代码：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <!-- ... -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <script src="<%= BASE_URL %>lib-flexible/flexible.js"></script>
  </head>
  <!-- ... -->
</html>

说明：

viewport用于设置移动端页面的视口，这里设置为与设备宽度一致，并禁止用户缩放。
flexible用于根据屏幕大小来计算rem值。

示例1：在.vue文件中使用px单位

<template>
  <div class="container">
    <p class="title">这里是标题</p>
    <button class="btn">这是一个按钮</button>
  </div>
</template>

<style scoped>
.container {
  width: 300px;
  height: 500px;
  background: #eee;
}

.title {
  font-size: 24px; /* 在.vue文件中直接使用px单位 */
  color: red;
}

.btn {
  width: 100px;
  height: 40px;
  background: #f00;
  color: #fff;
  font-size: 16px; /* 在.vue文件中直接使用px单位 */
  margin-top: 10px;
}
</style>

在上面的例子中，我们在.vue文件中直接使用了px单位，但是在编译的过程中，插件会将这些px单位转换为rem单位。

示例2：在.scss文件中使用px单位

$color-red: #f00;
$font-size: 16px;

.container {
  width: 300px;
  height: 500px;
  background: #eee;

  .title {
    font-size: $font-size; /* 在.scss文件中使用px单位 */
    color: $color-red;
  }

  .btn {
    width: 100px;
    height: 40px;
    background: $color-red;
    color: #fff;
    font-size: $font-size; /* 在.scss文件中使用px单位 */
    margin-top: 10px;
  }
}

在上面的例子中，我们在.scss文件中使用了px单位，同样也会自动转换为rem单位。

这就是使用Vue CLI3配合postcss-plugin-px2rem和lib-flexible完成移动端适配的完整攻略，可以帮助你快速构建适用于移动端的Vue项目。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem) - Python技术站