一、 ElementUI
1墨微、安裝:
npm install element-ui -S
2蜈缤、引用：
main.js中：
import ElementUI from 'element-ui'
// 現(xiàn)在的版本已經(jīng)沒有theme-default了缩滨，只有theme-chalk。
import 'element-ui/lib/theme-chalk/index.css' // 注意********
Vue.use(ElementUI)
3密似、直接在組件中用
詳細(xì)用法可參考：
https://www.cnblogs.com/songdongdong/p/6929037.html
4焙矛、elementUI版本升級：
npm uninstall element-ui // 卸載原有版本
npm install element-ui -S // 重新安裝
main.js中：（default修改為theme-chalk）
import 'element-ui/lib/theme-chalk/index.css'
http://www.reibang.com/p/4257d342ca05
二、 Vue中的輪播插件（Vue-Awesome-Swiper）
1残腌、安裝：
npm install vue-awesome-swiper --save
2村斟、main.js中：
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)
3、組件中：
import { swiper, swiperSlide } from 'vue-awesome-swiper'
require('swiper/dist/css/swiper.css')
export default {
components: {
swiper,
swiperSlide
},
data () {
return {
swiperOption: {
notNextTick: true,
// 循環(huán)
loop: true,
// 設(shè)定初始化時slide的索引
initialSlide: 0,
// 自動播放
autoplay: {
delay: 3000,
stopOnLastSlide: false,
disableOnInteraction: true
},
// 滑動速度
speed: 800
......
// 可自己修改抛猫、添加
}
}
<body>
<swiper :options="swiperOption" ref="mySwiper">
<!-- slides -->
<swiper-slide>I'm Slide 1</swiper-slide>
<swiper-slide>I'm Slide 2</swiper-slide>
...
<div class="swiper-pagination" slot="pagination"></div>
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
</swiper>
</body>
