vue cli3适配所有端方案的实现攻略

简介

Vue CLI 3 是基于 Vue.js 的官方命令行工具，用于快速搭建 Vue.js 项目。它的优点在于：

内置了大量的插件和预设，完全配置化。
集成了项目创建、开发、打包等主要功能。
使用独立的配置文件 vue.config.js 定制大部分的配置。
支持插件定制和扩展。

在移动互联网时代，前端开发所涉及到的设备类型越来越丰富，因此如何让一个 Web 应用能够适应不同设备尺寸、屏幕分辨率和用户交互方式成为了很重要的问题。本文将分享如何基于 Vue CLI 3 的配置，实现一个完整的多端适配方案。

实现过程

1. 配置viewport属性

viewport 可以理解为视口，主要用于网页在移动端显示的区域大小。因为移动设备屏幕大小不一，需要适配各种不同的屏幕尺寸。若不设定 viewport，会默认以 980px 宽度来渲染页面，显然会发生页面缩放、错位等问题，影响用户体验。

在 <head> 标签中添加以下代码即可：

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=False">

上述代码表示：使用设备的宽度作为 viewport 的宽度，初始缩放比例为 1（不缩放），最小缩放比例为 1（禁止缩小），最大缩放比例为 1（禁止放大），且不允许用户进行缩放。

2. 使用rem布局

在移动端设备上，因为屏幕尺寸、dpi 以及像素密度不同时，使用传统的 px 布局会导致页面在不同设备上显示效果不一致，不利于多端适配。因此，我们可以使用 rem 布局。

rem 布局是指根据 html { font-size: 100px; } 为基准，以此来将页面中的 px 值转为 rem 值。这样页面中所有元素的尺寸都是相对于 html 中的 font-size 的大小的，而 html 中的 font-size 又可以根据屏幕宽度动态调整。

Vue CLI 3 可以在 vue.config.js 文件中设置选项，开启 PostCSS 的插件并设置 remUnit 参数来将 px 转换成 rem。

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-plugin-px2rem')({
            rootValue: 100, // 换算基数，比如：设计稿宽度为1920，rootValue应该设置为192，这里设置为100便于计算
            // unitPrecision: 5, // 允许REM单位增长到的十进制数字。
            // propWhiteList: [], // 默认值是一个空数组，这意味着禁用白名单并启用所有属性。
            // propBlackList: [], // 黑名单
            // exclude: /(node_module)/, // 忽略node_modules中的文件
            // selectorBlackList: [], // 过滤掉某些选择器
            // ignoreIdentifier: false, // 是否忽略某些属性
            // replace: true, // 是否替换包含REM的规则
            // mediaQuery: false, // 是否允许在媒体查询中转换px
            // minPixelValue: 0 // 设置要替换的最小像素值
          }),
        ]
      }
    }
  }
}

3. 使用字体图标

使用字体图标可以大大减少图片请求和加载时间，且还可以随心所欲地调整图标大小，轻松实现多端适配。我们可以使用第三方的字体图标库，如阿里矢量图库 iconfont 。

在 iconfont 官网选择需要的图标并下载到本地，将所下载的文件解压后，选中其中的文件夹和文件后复制到项目中的 public 文件夹下。在官网生成的样式文件中查找并复制 @font-face 规则。

在 Vue 项目发开的过程中，使用这个 @font-face 规则内联到 App.vue 中，这样在任何一个组件内都可以使用。举个例子：

<template>
  <div>
    <router-view/>
    <i class="iconfont"></i>
    <i class="iconfont icon-add"></i>
    <i class="iconfont icon-search"></i>
  </div>
</template>
<style lang="scss" scoped>
  @import 'iconfont.css';
  // 加载iconfont css文件

  .iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  // 设置字体图标的样式

  .icon-add:before {
    content: "\e6a2";
  }

  .icon-search:before {
    content: "\e6a3";
  }
  // 设置矢量图标的内容
</style>

这样一来，页面上就可以使用字体图标了，且在不同设备和分辨率下都保持清晰可见，轻松实现多端适配。

示例

下面简单演示一个使用 Vue CLI 3 的多端适配示例。

1. 初始化工程

使用命令行工具，进入你想要存放项目的目录，执行以下命令：

vue create myproject

按照提示安装依赖，等待创建完成。

2. 配置viewport

在 public/index.html 中的 <head> 标签中添加以下代码：

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

3. 使用rem布局

安装 postcss-plugin-px2rem，该插件可以在 css 编译过程中将 px 转换为 rem。

npm install postcss-plugin-px2rem -D

在根目录下创建 vue.config.js 文件，添加如下代码：

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-plugin-px2rem')({
            rootValue: 75, // 设计稿宽度的1/10，例如设计稿宽度为 750px，则rootValue应该设置为75
            unitPrecision: 2, // 保留小数个数
            minPixelValue: 2, // 小于此值的px单位不转换
            selectorBlackList: ['van'], // 白名单列表
            propList: ['*'] //属性列表：允许替换所有属性的单位，'*'表示所有
          })
        ]
      }
    }
  }
}

4. 使用字体图标

登陆 iconfont 官网，选择好图标后生成对应的 css 代码，手动将文件下载到本地后替换 src/assets 下的同名文件。

在全局 main.js 中注册：

import './assets/css/iconfont.css'

之后就可以在组件中使用：

<i class="iconfont icon-xxx"></i>

总结

Vue CLI 3 是构建 Vue.js 项目的理想选择，它提供了丰富的插件和预设、完全配置化，而通过上述三个步骤，我们可以轻松地实现移动端适配。同时，由于 Vue CLI 3 本身集成了多种功能和预设，以及支持插件的定制和扩展，因此，开发人员可以自由选择适合自己场景和需求的多端适配方案，提高开发效率和用户体验。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：vue cli3适配所有端方案的实现 - Python技术站

vue cli3适配所有端方案的实现