imwty

专注大前端Web应用开发实践

0%

Nuxt3实战系列之引入Vant+移动端适配处理

发表于
做移动端比较主流的UI库就是Vant UI了。接下来我们讲讲如何在Nuxt3中使用VantUI，以及进行移动端适配。

之前笔者分享了如何在Nuxt3中使用Element Plus UI，但那是PC端的UI组件库，不适用于做移动端页面。做移动端比较主流的UI库就是Vant UI了。接下来我们讲讲如何在Nuxt3中使用VantUI。

引入Vant UI

  1. 先安装Vant

    1
    2
    # 可以选择一个你喜欢的包管理器npm/yarn/pnpm
    pnpm install vant

  2. 安装Nuxt官方专门针对引入vant 开发的模块

    1
    2
    # 选择合适的包管理器，npm/yarn/pnpm
    pnpm i @vant/nuxt -D

  3. 在nuxt.config.ts中配置modules参数

    1
    2
    3
    4
    5
    6
    export default defineNuxtConfig({
      modules: [
        '@vant/nuxt'
      ],
      vant: { /** Options */ }
    })

    至此，已经引入成功，且所有Vant 组件也都可以直接自动导入。
    示例：

    1
    2
    3
    4
    5
    <template>
      <van-button type="primary" @click="showToast('toast')">button</van-button>
      <VanButton type="success" @click="showNotify('notify')">button</VanButton>
      <LazyVanButton type="default">lazy button</LazyVanButton>
    </template>

记住：Vant 组件已经可以被自动导入，而且也包括自动导入showDialog 、showToast等方法，所以我们不用再手动书写import了。

移动端适配

其实在Vant UI官方文档中有讲到如何做移动端的单位适配，需要借助postcss插件实现。其中，讲到了两种适配方式，一种是将px单位转换为vw。一种是将px单位转换为rem。

  • vw单位适配方案

vw单位适配方案

  • rem单位适配方案

rem单位适配方案
那我们该使用哪种方案呢？其实笔者更倾向于使用rem方案，因为rem的兼容性更好，但是用rem的话，需要用到lib-flexble库去根据媒体查询动态的调整html的font-size，略显麻烦，所以，笔者打算将两者结合。

  1. 开发的时候书写px单位，然后通过插件将px单位换算成rem；
  2. 将html的font-size设置为vw单位，这样根元素font-size就能自动根据视口宽度动态变化;

具体的实现方式如下：

  1. 安装postcss-pxtorem

    1
    pnpm i -D postcss-pxtorem

  2. 在nuxt.config.ts中配置postcss参数。笔者是以750px的尺寸做为设计稿参考值，定1rem=100px，这样换算方便。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    export default defineNuxtConfig({
      // ...other setting
      postcss: {
        plugins: {
          'postcss-pxtorem': {
            rootValue({ file }: any) {
              return file.indexOf('vant') !== -1 ? 37.5 : 100
            },
            propList: ['*'],
            exclude: /(node_module)/,
            selectorBlackList: ['html', '.rem-ignore']
          }  
        }
      },
    })

  3. 在app.vue或者其他全局的css文件中添加以下css。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <style>
      html {
        font-size: 13.33333333vw;
      }

      @media (min-width: 560px) {
       html {
          font-size: 74.66666666666667px;
        }
      }

      body {
        font-size: 16PX;
      }
    </style>

13.33333333vw在750的设计稿上刚好为100px，所以刚好和第二步定的基准值一致。然后我将body的字体大小设为16px，是为了不让页面中内容在没有设置font-size时显的过大。而当页面宽度超过560px后，我们一般认为已经是宽屏设备了，采用一个统一的单位就可以了。
至此，配置完成，开发时候，我们将设计稿宽度调为750后，就可以完全按照设计稿的尺寸书写样式了。
比如我们写一个只占一半宽度的盒子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script setup lang="ts">

</script>

<template>
  <div>
    <div class="box"></div>
  </div>
</template>

<style>
.box {
  width: 375px;
  height: 375px;
  background-color: blue;
}
</style>

375px其实也就是标准稿的一半宽，也就是说这个div实际只会占据一半的页面，以下是在iPhoneXR的模拟设备上的效果。真实宽度是207px， 刚好是414px的一半。完美适配！
image.png

后记

至此，Vant组件成功引入，移动端适配问题也解决。接下来就可以好好的撸业务代码咯。一般移动端页面的大多数访问场景都是在微信内。其中就涉及怎么实现微信授权登录，这对新手来说也是个麻烦事，笔者将在下一篇分享中再来探讨该问题。
欢迎批评指正，或者与我交流探讨前端技术。源码尚未公开，联系我可私发。
联系我：imwty2023（微信）