1.uniapp项目搭建

因为是安装vant2所以项目选择vue2，如果vue3项目的话安装vant3，vue3可能不适合这样安装方式

2.安装vant

npm i vant@latest-v2

3.在main.js文件引入挂载vant

说明：// #ifndef VUE3这里是vue2模板用来挂载注册组件的地方；// #ifdef VUE3这里是vue3模板挂载注册插件的地方

import App from './App'
// import * as echarts from 'echarts'


// #ifndef VUE3
import Vue from 'vue'
import uView from '@/node_modules/uview-ui'//在import Vue from 'vue'下引入uView
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import './uni.promisify.adaptor'
import Vant from './node_modules/vant/lib/vant'

Vue.use(uView).use(ElementUI).use(Vant)

Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
  ...App
})
app.$mount()
// #endif

// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
  const app = createSSRApp(App)
  app.use(Vant)
  return {
    app
  }
}
// #endif

4.app.vue中引入vant 样式文件

@import '@/node_modules/vant/lib/index.css';

5.使用组件

有的组件需要引入(弹框这种在js中使用的需要)，有的不需要引入(按钮这样的标签就不需要引入)

import { Dialog } from 'vant';

<van-badge :content="5">
  <div class="child" />
</van-badge>