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>

　　

发现运行出错

vant/lib/vant-css/index.css in ./plugins/vant.js，默认将它当成模块了，

 

解决方法：将plugins/vant.js中的import 'vant/lib/vant-css/index.css'删除掉，然后在nuxt.config.js中使用全局样式

css: [
'vant/lib/index.css'
],