swiper插件报错 vue_vue使用swiper实现轮播以及遇到的坑

swiper插件的使用

1.安装

npm install vue-awesome-swiper --save

2.全局引用(main.js)

import VueAwesomeSwiper from 'vue-awesome-swiper'

import 'swiper/swiper-bundle.css'

Vue.use(VueAwesomeSwiper, /* { default options with global component } */)

3.在组件中引用

import { swiper, swiperSlide, directive } from "vue-awesome-swiper";

import "swiper/swiper-bundle.css";

export default {

components: {

swiper,

swiperSlide,

},

}

组件代码

{ { item.name }}

data() {

return {

banners: [

{ name: "11111" },

{ name: "2222" },

{ name: "333" },

{ name: "44444" },

{ name: "55555" },

],

// 轮播图