一、 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版本升級(jí)：
npm uninstall element-ui // 卸載原有版本
npm install element-ui -S // 重新安裝
main.js中：（default修改為theme-chalk）
import 'element-ui/lib/theme-chalk/index.css'
http://m.itdecent.cn/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è)定初始化時(shí)slide的索引
initialSlide: 0,
// 自動(dòng)播放
autoplay: {
delay: 3000,
stopOnLastSlide: false,
disableOnInteraction: true
},
// 滑動(dòng)速度
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>
