Vue使用swiper-详细介绍

短命女 2023-05-22 06:53 12阅读 0赞

### Vue使用swiper-详细介绍 ###

1.在项目中引入swiper  
`npm install swiper --save-dev`  
2.在Vue项目中需要用到swiper的组件里写入以下代码：

<template>
      <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div>
        </div>
        
        <div class="swiper-pagination"></div>
        
        
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
        
        
        <div class="swiper-scrollbar"></div>
      </div>
    </template>

3.在main.js文件中引入swiper

import Vue from 'vue'
    import App from './App'
    import router from './router'
    //注意：这里引入的时候需要与你项目中的文件结构一致，
    //否则可能出现not found的情况
    //具体查看项目中node_modules文件夹下的swiper文件内的目录结构
    import './swiper/js/swiper.min.js';
    import './swiper/css/swiper.min.css';
    
    Vue.config.productionTip = false
    
    /* eslint-disable no-new */
    new Vue({
        
      el: '#app',
      router,
      components: {
         App },
      template: '<App/>'
    })