1st.Element-UI
1.1 安装
在终端输入
npm install element-ui
1.2 导入
在全局main.js中全局导入Element-UI：
// 导入element-ui组件库
import ElementUI from 'element-ui';
// 导入element-ui组件库的样式
import 'element-ui/lib/theme-chalk/index.css';
// 注意：element-ui组件库，是一个插件，所有的插件都要由Vue去use
Vue.use(ElementUI);
2nd.Echarts
2.1 安装
在终端输入
npm install echarts --save
2.2 导入
在使用ECharts的组件里导入ECharts：
// 导入echarts的所有成员，并转成一个对象
import * as echarts from 'echarts';
2.3 使用
因为要进行dom操作，所以在mounted生命周期函数里使用准备好的dom(dom需要给宽高，ECharts不会撑开盒子)，之后的图表都会在此容器中显示
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
随后在myChart.setOption({}）中复制实例代码即可使用。
3rd.Swiper插件(低版本)
3.1 安装
npm install swiper@5 vue-awesome-swiper@4
3.2 导入
3.2.1全局导入
在main.js中全局导入
// 导入swiper
import VueAwesomeSwiper from 'vue-awesome-swiper'
// 导入swiper的样式
import 'swiper/css/swiper.css'
// 因为swiper是插件，所以要use
Vue.use(VueAwesomeSwiper)
3.2.2 局部导入
在需要使用Swiper的组件中导入
// 导入swiper的组件
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
// 导入swiper的样式
import 'swiper/css/swiper.css'
export default {
// 注册组件
components: {
Swiper,
SwiperSlide
}
}
3.3 使用
页面中使用swiper标题作为滑块，并使用options属性绑定配置选择：
<swiper :options="swiperOptions">
<swiper-slide>
<img src="http://p1.music.126.net/Y6gItVxUvkbvI2cC8KVZYA==/109951166461233203.jpg?imageView&quality=89">
</swiper-slide>
<swiper-slide>
<img src="http://p1.music.126.net/ypjEcAl-BXKqb2UWdau-Tw==/109951166463199078.jpg?imageView&quality=89">
</swiper-slide>
<swiper-slide>
<img src="http://p1.music.126.net/_7zX4BjboCYo4KYRvpayDg==/109951166461246383.jpg?imageView&quality=89">
</swiper-slide>
<swiper-slide>
<img src="http://p1.music.126.net/3Vwphalm49ewNV-lIJUBNA==/109951166461279853.jpg?imageView&quality=89">
</swiper-slide>
<!-- 分页器 -->
<div class="swiper-pagination" slot="pagination"></div>
<!--左箭头。如果放置在swiper-container外面，需要自定义样式。-->
<div class="swiper-button-prev" slot="button-prev"></div>
<!--右箭头。如果放置在swiper-container外面，需要自定义样式。-->
<div class="swiper-button-next" slot="button-next"></div>
</swiper>
配置选项：
data() {
return {
// 定义swiper的配置选项
swiperOptions: {
// 指定分页器
pagination: {
//指定分页器的容器
el: ".swiper-pagination",
//点击分页器的指示点分页器会控制Swiper切换
clickable:true
},
// 配置衔接滑动
loop:true,
// 配置自动播放
// autoplay:true
autoplay:{
//自动播放
autoplay:true,
//设置间隔时间
delay:3000,
// 用户操作swiper之后，是否禁止autoplay
disableOnInteraction:false
},
// slide的切换效果
effect:'coverflow',
// 箭头
navigation:{
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}
},
};
},
