uniapp中安装vant2

1.uniapp项目搭建

因为是安装vant2所以项目选择vue2,如果vue3项目的话安装vant3

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.使用组件

无需引入直接使用

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

相关推荐

  1. uniapp引入vant组件库

    2024-03-30 12:54:03       11 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-03-30 12:54:03       19 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-03-30 12:54:03       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-03-30 12:54:03       19 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-03-30 12:54:03       20 阅读

热门阅读

  1. RabbitMQ的部分模式

    2024-03-30 12:54:03       18 阅读
  2. 关于学习编程和技术的自述

    2024-03-30 12:54:03       17 阅读
  3. 每日更新5个Python小技能 | 第六期

    2024-03-30 12:54:03       17 阅读
  4. Hive窗口函数笔试题(面试题)

    2024-03-30 12:54:03       21 阅读
  5. Android studio 老旧版本下载地址

    2024-03-30 12:54:03       22 阅读
  6. leetcode 62.不同路径

    2024-03-30 12:54:03       14 阅读
  7. 电子元器件商城模式的安全与风险管理

    2024-03-30 12:54:03       24 阅读
  8. 算法——图论:路径,回溯

    2024-03-30 12:54:03       18 阅读