在nuxt.js中 怎么引用vant

在 Nuxt.js 中使用 Vant UI，需要进行以下步骤：

1. 安装 vant：

   npm install vant

2. 在 nuxt.config.js 中配置 vant：

   // nuxt.config.js
   export default {
     // ...
     head: {
       link: [
         { rel: 'stylesheet', href: 'https://cdn.jsdelivr.net/npm/vant@next/dist/vant.min.css' }
       ]
     },
     plugins: [
       { src: '@/plugins/vant', ssr: true }
     ]
   }

需要注意的是，由于 Vant 使用了 ES6 的语法，需要使用 Babel 进行转换，所以需要在 nuxt.config.js 中配置插件。

3. 在 plugins 目录下创建 vant.js：

   // plugins/vant.js
   import Vue from 'vue'
   import Vant from 'vant'
   import 'vant/lib/index.css'

   Vue.use(Vant)

这里使用了 Vant 的默认样式，如果你想自定义主题或者按需引入组件，可以参考 Vant 的官方文档进行配置。

4. 在组件中使用 vant 组件：

   <template>
     <van-button @click="handleClick">按钮</van-button>
   </template>

   <script>
   export default {
     methods: {
       handleClick() {
         console.log('按钮被点击了')
       }
     }
   }
   </script>

像普通组件一样，直接使用 vant 组件即可。