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'
],