简单使用veu实现轮播图

制作Vue版本的轮播图

第一步：

安装依赖

npm i swiper@5 --save

npm i vue-awesome-swiper@3 --save

第二步：

全局安装

在main.js里面操作：

import VueAwesomeSwiper from 'vue-awesome-swiper'

/* 在node_modules里面找到swiper文件夹里面的css文件 */

import 'swiper/css/swiper.css'

/* 使用Vue.use来注册一个轮播图插件 */

Vue.use(VueAwesomeSwiper)

第三步：

在自己的组件文件夹中 新建一个轮播图组件 MySwiper.vue：

并复制以下代码到你的组件中：

/* scoped会防止组件内的样式污染全局使用，会优先使用组件内的样式 */ .swiper-container {   width: 500px;   height: 400px;   border: 1px solid red;   display: block; }