Nuxt 中引入 Vant 组件

1、新建插件文件

在 plugins 目录添加 vant.js 插件文件,用来引用 Vant 组件:

vant.js

import Vue from 'vue'
import Vant from 'vant';
import 'vant/lib/vant-css/index.css'

Vue.use(Vant)

2、注册插件

在 nuxt.config.js 文件里注册插件:

nuxt.config.js

...
plugins: [{src: '~plugins/vant', ssr: true}],
...

注意: ssr(服务器端运行) 要设置为 true,否则浏览器出现 no match 的警告。

3、使用 Vant 标签

在 page 文件中直接使用标签:

index.vue

<template>
  <van-row>
    <van-button size="large">来点我呀</van-button>
  </van-row>
</template>

<script>
  export default {
  }
</script>


前一篇:
后一篇:

发表评论