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

引入Vant UI

  1. 先装置Vant

    # 能够抉择一个你喜爱的包管理器npm/yarn/pnpmpnpm install vant

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

    # 抉择适合的包管理器，npm/yarn/pnpmpnpm i @vant/nuxt -D
    1. 在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