一、 ElementUI
1、安装:
npm install element-ui -S
2、引用：
main.js中：
import ElementUI from 'element-ui'
// 现在的版本已经没有theme-default了，只有theme-chalk。
import 'element-ui/lib/theme-chalk/index.css' // 注意********
Vue.use(ElementUI)
3、直接在组件中用
详细用法可参考：
https://www.cnblogs.com/songdongdong/p/6929037.html
二、 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,
// 循环
loop: true,
// 设定初始化时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>
网友评论