vue项目中使用vant轮播图组件(桌面端)

一. 内容简介

vue使用vant轮播图组件(桌面端)

二. 软件环境

2.1 Visual Studio Code 1.75.0

2.2 chrome浏览器

2.3 node v18.14.0

三.主要流程

3.1 安装环境

3.2 添加代码

3.3 结果展示

四.具体步骤

4.1 安装环境

先安装包

javascript 复制代码
# Vue 3 项目,安装最新版 Vant
npm i vant

# Vue 2 项目,安装 Vant 2
npm i vant@latest-v2

然后桌面端适配

javascript 复制代码
npm i @vant/touch-emulator -S

4.2 添加代码

注册组件

相比于官方给的代码,有两个方面需要注意,一个是适配桌面端,还有一个就是我以为vant组件是和vue组件一样,导入一个就包含所有的结构了,其实vant组件import导入的时候并没有导入css样式,就会出现这样,就是样式不全。

javascript 复制代码
<template>
  <div id="cc">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>1</van-swipe-item>
      <van-swipe-item>2</van-swipe-item>
      <van-swipe-item>3</van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
import { Swipe, SwipeItem } from "vant";
// 为了适配桌面端
import "@vant/touch-emulator";
export default {
  data() {
    return {};
  },
  components: { [Swipe.name]: Swipe, [SwipeItem.name]: SwipeItem },
};
</script>

<style>
// 导入样式
@import "vant/lib/index.css";
#cc {
  width: 100%;
  clip: auto;
}
.van-swipe-item {
  width: 100%;
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
</style>

后续更新

放到main.js里面就好了,改样式可以直接覆盖他原来的样式就可以了

javascript 复制代码
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'


// 加载Vant组件库
import Vant from 'vant';
import 'vant/lib/index.css';

// 自己的要放在组件库后面,这样才能方便修改
// 加载全局样式
import './styles/index.less'

// 移动端REM适配,动态调整html字体大小
import 'amfe-flexible'
// 桌面端适配
import "@vant/touch-emulator";


// 注册Vant组件
Vue.use(Vant);

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

4.3 结果展示

五. 参考

相关推荐
恋猫de小郭2 分钟前
Google I/O Extended :2025 Flutter 的现状与未来
android·前端·flutter
江城开朗的豌豆6 分钟前
Vue-router方法大全:让页面跳转随心所欲!
前端·javascript·vue.js
程序员爱钓鱼16 分钟前
Go语言泛型-泛型约束与实践
前端·后端·go
前端小巷子18 分钟前
web从输入网址到页面加载完成
前端·面试·浏览器
江城开朗的豌豆18 分钟前
Vue路由动态生成秘籍:让你的链接'活'起来!
前端·javascript·vue.js
晓得迷路了19 分钟前
栗子前端技术周刊第 88 期 - Apache ECharts 6.0 beta、Deno 2.4、Astro 5.11...
前端·javascript·echarts
江城开朗的豌豆24 分钟前
在写vue公用组件的时候,怎么提高可配置性
前端·javascript·vue.js
江城开朗的豌豆25 分钟前
Vue路由跳转的N种姿势,总有一种适合你!
前端·javascript·vue.js
江城开朗的豌豆25 分钟前
Vue路由玩法大揭秘:三种路由模式你Pick谁?
前端·javascript·vue.js
江城开朗的豌豆26 分钟前
Vue路由守卫全攻略:给页面访问装上'安检门'
前端·javascript·vue.js