Nuxtjs

之前笔者分享了如何在Nuxt3中应用Element Plus UI，但那是PC端的UI组件库，不适用于做挪动端页面。做挪动端比拟支流的UI库就是Vant UI了。接下来咱们讲讲如何在Nuxt3中应用VantUI。 引入Vant UI先装置Vant # 能够抉择一个你喜爱的包管理器npm/yarn/pnpmpnpm install vant装置Nuxt官网专门针对引入vant 开发的模块 # 抉择适合的包管理器，npm/yarn/pnpmpnpm 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。 ...