Nuxt3中如何引入Vant UI+移动端适配处理

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

引入Vant UI

1. 先安装Vant

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

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

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

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

   export default defineNuxtConfig({
     modules: [
    '@vant/nuxt'
     ],
     vant: { /** Options */ }
   })

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

   <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单位适配方案
  
• rem单位适配方案
  

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

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

具体的实现方式如下：

1. 安装postcss-pxtorem

   pnpm i -D postcss-pxtorem

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

   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。

   <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后，就可以完全按照设计稿的尺寸书写样式了。
比如我们写一个只占一半宽度的盒子:

<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的一半。完美适配！

后记

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

本文原创地址：Nuxt3实战系列之引入Vant+移动端适配处理 | imwty