关于nuxtjs:Nuxt3中如何引入Vant-UI移动端适配处理

45次阅读

共计 2105 个字符，预计需要花费 6 分钟才能阅读完成。

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

先装置Vant

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

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

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

在 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，略显麻烦，所以，笔者打算将两者联合。

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

具体的实现形式如下：

装置postcss-pxtorem
```
pnpm i -D postcss-pxtorem
```

在 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']
   }  
 }
  },
})

在 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

正文完