在vue中使用插件

一、使用scss

用npm  install node-sass sass-loader vue-style-loader有可能会出错，因此可选用

cnpm install node-sass sass-loader vue-style-loader

二、使用vuex

npm install vuex --save

引用：

import Vuex from'vuex';

Vue.use(Vuex);

三、使用swiper（图片轮播）

cnpm install swiper --save

图片轮播的bannerPic.vue文件:（子组件）

<template>

  <div class="swiper-container">

        <div class="swiper-wrapper">

            <div class="swiper-slide" v-for="str in listImg" :style="{ backgroundImage: 'url(' + str.url + ')' }"></div>

        </div>

        <div class="swiper-pagination swiper-pagination-white"></div>

    </div>

</template>

<script>

import Swiper from 'swiper';

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

export default {

    props: ['listImg'],

    mounted() {

        var swiper = new Swiper('.swiper-container', {

            pagination: '.swiper-pagination',

            paginationClickable: true,

            loop: true,

            speed: 600,

            autoplay: 4000,

            onTouchEnd: function() {

                swiper.startAutoplay()

            }

        });

    }

}

</script>

<style lang="scss">

.swiper-container {

    width: 100%;

    height:7.5rem;

    .swiper-wrapper {

        width: 100%;

        height: 100%;

    }

    .swiper-slide {

        background-position: center;

        background-size: cover;

        width: 100%;

        height: 100%;

        // background-size: 100% 100%;

        object-fit:fill;

        img {

            width: 100%;

            height: 100%;

        }

    }

    .swiper-pagination-bullet {

        width: .4rem;

        height: .4rem;

        display: inline-block;

    }

}

</style>

父组件中：

<template>

  <div class="container banner">

    <banner :listImg="listImg"></banner>

  </div>

</template>

<script>

import Banner from '../../components/bannerPic'

import a from '../../assets/images/banner.jpg'

import b from '../../assets/images/banner.jpg'

import c from '../../assets/images/banner.jpg'

export default {

  name: 'container',

  data () {

    return {

      listImg: [{

          url: a

      }, {

          url: b

      }, {

          url: c

      }]

    }

  },

  components: {

    Banner

  }

}

</script>