vue项目中引入第三方框架

element-ui

　　npm install element-ui -- save;

　　main.js中

　　　　import Element from 'element-ui';

　　　　import 'element-ui/lib/theme-chalk/index.css';

　　　　Vue.use(Element);

 

swiper

　　npm install vue-awesome-swiper --save

　　main.js中

　　　　import VueAwesomeSwiper from 'vue-awesome-swiper';

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

　　　　Vue.use(VueAwesomeSwiper);

　　

　　页面中用法　　

　　　　<swiper :options="swiperOption" ref="mySwiper">

　　　　　　<swiper-slide>

　　　　　　　　<img src="../../assets/home/home_banner_1.png"/>

　　　　　　</swiper-slide>

　　　　　　<swiper-slide>

　　　　　　　　<img src="../../assets/home/home_banner_2.png"/>

　　　　　　</swiper-slide>

　　　　　　<!-- Optional controls -->

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

　　　　</swiper>

 

　　　　

　　　　　data中： 

　　　　　　swiperOption: {

　　　　　　　　loop: true,

　　　　　　　　speed: 1000,

　　　　　　　　autoplay: {

　　　　　　　　　　delay: 2000,

　　　　　　　　　　autoplayDisableOnInteraction: false

　　　　　　　　},

　　　　　　　　pagination: {

　　　　　　　　　　el: '.swiper-pagination'

　　　　　　　　}

　　　　　　}

 

　　　　computed: {

　　　　　　swiper() {

　　　　　　　　return this.$refs.mySwiper.swiper

　　　　　　}

　　　　}

　　

　　

转载于:https://www.cnblogs.com/Mr-Rshare/p/10143422.html