1st.Element-UI
1.1 安裝
? ? 在終端輸入
npm?install?element-ui
1.2 導(dǎo)入
? ? 在全局main.js中全局導(dǎo)入Element-UI：
//?導(dǎo)入element-ui組件庫(kù)
import?ElementUI?from?'element-ui';
//?導(dǎo)入element-ui組件庫(kù)的樣式
import?'element-ui/lib/theme-chalk/index.css';
//?注意：element-ui組件庫(kù)，是一個(gè)插件，所有的插件都要由Vue去use
Vue.use(ElementUI);
2nd.Echarts
2.1 安裝
????在終端輸入
npm install echarts --save
2.2 導(dǎo)入
????在使用ECharts的組件里導(dǎo)入ECharts：
// 導(dǎo)入echarts的所有成員，并轉(zhuǎn)成一個(gè)對(duì)象
import?*?as?echarts?from?'echarts';
2.3 使用
因?yàn)橐M(jìn)行dom操作，所以在mounted生命周期函數(shù)里使用準(zhǔn)備好的dom(dom需要給寬高，ECharts不會(huì)撐開(kāi)盒子)，之后的圖表都會(huì)在此容器中顯示
//?基于準(zhǔn)備好的dom，初始化echarts實(shí)例
var?myChart?=?echarts.init(document.getElementById('main'));
隨后在myChart.setOption({}）中復(fù)制實(shí)例代碼即可使用。
3rd.Swiper插件(低版本)
3.1 安裝
npm?install?swiper@5?vue-awesome-swiper@4
3.2 導(dǎo)入
?3.2.1全局導(dǎo)入
? ? 在main.js中全局導(dǎo)入
//?導(dǎo)入swiper
import?VueAwesomeSwiper?from?'vue-awesome-swiper'
//?導(dǎo)入swiper的樣式
import?'swiper/css/swiper.css'
//?因?yàn)閟wiper是插件，所以要use
Vue.use(VueAwesomeSwiper)
3.2.2 局部導(dǎo)入
? ? 在需要使用Swiper的組件中導(dǎo)入
//?導(dǎo)入swiper的組件
import?{?Swiper,?SwiperSlide?}?from?'vue-awesome-swiper'
//?導(dǎo)入swiper的樣式
import?'swiper/css/swiper.css'
export?default?{
????//?注冊(cè)組件
????components:?{
????????Swiper,
????????SwiperSlide
????}
}
3.3 使用
頁(yè)面中使用swiper標(biāo)題作為滑塊，并使用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>
? ? <!-- 分頁(yè)器 -->
? ? <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>
配置選項(xiàng)：
data()?{
????return?{
????????//?定義swiper的配置選項(xiàng)
????????swiperOptions:?{
????????????//?指定分頁(yè)器
????????????pagination:?{
????????????????//指定分頁(yè)器的容器
????????????????el:?".swiper-pagination",
????????????????//點(diǎn)擊分頁(yè)器的指示點(diǎn)分頁(yè)器會(huì)控制Swiper切換
????????????????clickable:true
????????????},
????????????//?配置銜接滑動(dòng)
????????????loop:true,
????????????//?配置自動(dòng)播放
????????????//?autoplay:true
????????????autoplay:{
????????????????//自動(dòng)播放
????????????????autoplay:true,
????????????????//設(shè)置間隔時(shí)間
????????????????delay:3000,
????????????????//?用戶(hù)操作swiper之后，是否禁止autoplay
????????????????disableOnInteraction:false
????????????},
????????????//?slide的切換效果
????????????effect:'coverflow',
????????????//?箭頭
????????????navigation:{
????????????????nextEl:?'.swiper-button-next',
????????????????prevEl:?'.swiper-button-prev',
????????????}
????????},
????};
},
