vue使用swiper实现多栏目滚动导航，并成功构建

一、npm install [email protected]

二、组件中引入和配置

import Swiper from 'swiper';

import 'swiper/dist/css/swiper.min.css';

mounted() {

        if (Boolean(this.lineTypes) && this.lineTypes.length > 10) {

            var mySwiper = new Swiper('.filter-scroll', {

                direction: 'horizontal',

                slidesPerView: 11,

                spaceBetween: 0,

                // loop: true,

                notNextTick: true,

                navigation: {

                    nextEl: '.swiper-button-next',

                    prevEl: '.swiper-button-prev',

                }

            })

        }

    }

三、配置webpack.base.conf.js后，就可以成功构建

{

        test: /\.js$/,

        exclude: /node_modules\/(?!(dom7|ssr-window|swiper)\/).*/,

        loader: 'babel-loader',

        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]

      }