之前笔者分享了如何在Nuxt3中使用Element Plus UI，但那是PC端的UI组件库，不适用于做移动端页面。做移动端比较主流的UI库就是Vant UI了。接下来我们讲讲如何在Nuxt3中使用VantUI。
引入Vant UI
- 先安装
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（微信）
