Nuxt3中如何引入VantUI+手机端适配

之前分享过Nuxt3中ElementPlusUI的使用方法，但是那是PC端的UI组件库，不适合移动端页面。主流的移动端UI库是VantUI。接下来说一下如何在Nuxt3中使用VantUI。引入VantUI，先安装Vant#可以选择自己喜欢的包管理器npm/yarn/pnpmpnpminstallvant安装Nuxt官方专门为引入vant开发的模块#选择合适的包管理器，npm/yarn/pnpmpnpmi@vant/nuxt-D在nuxt.config.ts中配置modules参数exportdefaultdefineNuxtConfig({modules:['@vant/nuxt'],vant:{/**Options*/}})至此，已经引入成功，所有Vant组件也可以直接导入。示例：记住：Vant组件已经可以自动导入，还包括自动导入showDialog、showToast等方法，所以我们不需要再次手动编写导入。移动端适配其实在VantUI官方文档中提到了如何做移动端单元适配，需要借助postcss插件来实现。其中提到了两种适配方式，一种是将px单位转换为vw。一种是将px单位转换为remvw单位适配方案rem单位适配方案那么我们应该使用哪种方案呢？其实笔者更喜欢使用rem的方案，因为rem的兼容性更好，但是如果使用rem，需要lib-flexble库根据媒体查询动态调整html的font-size，有点麻烦，所以作者打算将两者结合起来。开发时写px单位，然后通过插件将px单位转换为rem；设置html的font-size为vw单位，这样根元素的font-size可以根据viewport的宽度自动动态变化；具体实现方法如下：安装postcss-pxtorempnpmi-Dpostcss-pxtorem在nuxt.config.ts中配置postcss参数。作者以750px的尺寸作为设计稿的参考值，设置1rem=100px，方便转换。exportdefaultdefineNuxtConfig({//...其他设置postcss:{plugins:{'postcss-pxtorem':{rootValue({file}:any){returnfile.indexOf('vant')!==-1?37.5:100},propList:['*'],exclude:/(node_module)/,selectorBlackList:['html','.rem-ignore']}}},})在app.vue或其他全局css文件中添加以下cssin.13.33333333vwin750的设计稿刚好是100px，所以和第二步设置的基准值完全一致。然后我把body的字号设置为16px，是为了在没有设置font-size的情况下不让页面内容显得太大。而当页面宽度超过560px时，我们一般认为已经是宽屏设备了，统一一个单位就可以了。至此，配置完成。在开发的时候，我们把设计稿的宽度调整为750后，就可以完全按照设计稿的尺寸来写样式了。比如我们写一个只占一半宽度的盒子：