nuxt使用vant

1,711 阅读1分钟

1:

Vue 2 项目,安装 Vant 2:

npm i vant -S 

Vue 3 项目,安装 Vant 3:

npm i vant@next -S

2:新建一个文件夹plugins

image.png

vant.js文件

import Vue from 'vue';
import { Popup, Area } from 'vant';
import 'vant/lib/index.css'
Vue.use(Popup);
Vue.use(Area);

3:nuxt.config.js文件中导入

    plugins: [
    '@/plugins/vant'
  ],

4:在页面中使用

  <van-popup position="bottom" v-model="show">
            <van-area
                title="标题"
                :area-list="areaList"
                :value="cityname"
                @cancel="cancelFn"
                @confirm="confirmFn"
                :columns-num="2"
            ></van-area>
        </van-popup>