vue引入swiper报错

Posted 2023-04-23

参考技术A vue项目的package.json中显示的"vue-awesome-swiper": "^2.5.4"，用npm install自动安装依赖时装的版本为"version": "2.6.7"，而单独安装（npm install vue-awesome-swiper@2.5.4）的则是正常的"version": "2.5.4"。
这两个版本都是基于swiper3的，

而2.6.7版本需要单独引入swiper/dist/css目录下的swiper.css样式文件（类似于swiper4）。
并且2.6.7版本swiper位于node_modules/vue-awesome-swiper/node_modules下；2.5.4不需要单独引入样式文件，并且swiper直接位于node_modules文件夹下。

vue中引入swiper插件

这里我们使用npm的方式安装swiper插件。

1.npm install vue-awesome-swiper --save

2.在main.js文件中引入文件

import Vue from ‘vue‘

import VueAwesomeSwiper from ‘vue-awesome-swiper‘

3.然后注册全局的swiper

Vue.use(VueAwesomeSwiper)

4.在模板中使用

//引入swiper.css
require(‘swiper/dist/css/swiper.css‘)

import { swiper, swiperSlide } from ‘vue-awesome-swiper‘

 

export default {

  components: {

    swiper,

    swiperSlide

  }

}

5.swiper的js设置直接写在直接放在 mounted 中处理。