一、Vue Router路由
Vue Router是Vue.js官方的路由管理器，可以實現(xiàn)頁面的跳轉。
1、安裝
npm install vue-router
2、 導入vue-router
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
3、創(chuàng)建路由器
// 導入頁面組件
import Home from './pages/Home.vue'
import List from './pages/List.vue'
// 創(chuàng)建路由器對象
export default new VueRouter({
// 定義當前路由器對象管理的路由信息
routes: [
// 每一條路由信息，就是一個對象
{
// 路由路徑
path:'/home',
// 路由名稱
name:'home',
// 路由組件
component:Home
},
{
path: '/list',
name: 'list',
component: List
}
]
})
4、配置路由器
// 導入當前項目中創(chuàng)建的路由器對象
import router from './router'
new Vue({
render: h => h(App),
// 在Vue的實例上，配置一個路由器對象
router
}).$mount('#app')
5、使用路由
（1）路由組件跳轉
router-link是路由鏈接組件，用于跳轉路由。通過傳入 to 屬性指定鏈接， 即要顯示的內容。router-link默認會被渲染成一個 <a> 標簽。
router-view是路由視圖組件，用于呈現(xiàn)路由頁面。
<router-link to="/home">首頁</router-link>
<router-link to="/list">列表</router-link>
<router-view></router-view>
（2）編程式路由跳轉
編程式路由跳轉，可以在跳轉之前，做各種驗證，比如判斷權限等等。
router是當前vue實例里面的路由器對象。
push方法：用于跳轉路由，在瀏覽器的歷史記錄中，添加一個路由信息。需要注意，不能反復push同一個路由地址。
replace方法：也是用于跳轉路由。它用當前地址替換歷史記錄里面的最近一條地址。
<button @click="gotoHome">首頁</button>?
<button @click="gotoList">列表</button>
<router-view></router-view>
methods: {
gotoHome() {
if (this.router.push("/home");
}
},
gotoList() {
if (this.router.push("/list");
}
}
}
二、swiper插件
Swiper是純javascript打造的滑動特效插件，面向手機、平板電腦等移動終端。Swiper能實現(xiàn)觸屏焦點圖、觸屏Tab切換、觸屏輪播圖切換等常用效果。
1、安裝
npm install swiper@5 vue-awesome-swiper@4
2、導入
（1）全局導入
在入口文件main.js中全局導入。
導入swiper
import VueAwesomeSwiper from 'vue-awesome-swiper'
導入swiper的樣式
import 'swiper/css/swiper.css'
因為swiper是插件，所以要use
Vue.use(VueAwesomeSwiper)
（2）局部導入
在需要使用swiper插件的頁面組件中引入。
局部導入的優(yōu)勢：只有在頁面組件使用swiper插件時，才會引入插件，起到一個懶加載作用；全局導入不管是否使用，都會引入。局部更有利于性能優(yōu)化，全局更方便開發(fā)。
導入swiper的組件
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
導入swiper的樣式
import 'swiper/css/swiper.css'
export default {
注冊組件
components: {
Swiper,
SwiperSlide
}
}
3、使用
<div class="box">
<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>
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
</swiper>
</div>
data() {
return {
// 定義swiper的配置選項
swiperOptions: {
// 指定分頁器
pagination: {
// 指定分頁器的容器
el: ".swiper-pagination",
// 點擊分頁器的指示點分頁器會控制Swiper切換
clickable:true
},
// 配置自動播放
// autoplay:true
autoplay:{
//自動播放
autoplay:true,
// 設置間隔時間
delay:3000,
// 用戶操作swiper之后，是否禁止autoplay
disableOnInteraction:false
},
// 配置銜接滑動
loop:true,
// 箭頭
navigation:{
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// slide的切換效果
effect:'cube',
},
}
},
};
三、Echarts使用
Echarts是一個基于 JavaScript 的開源可視化圖表庫。
1、安裝
npm install echarts --save
2、導入
import * as echarts from 'echarts';
關閉eslint語法檢查
"eslintConfig": {
"rules": {
"no-unused-vars": "off"
}
}
3、準備容器
<div class="charts">
<h3>使用ECharts</h3>
<div id="main"></div>
</div>
4、選擇示例圖
在官網選擇[示例圖]并下載示例。
5、引入 ECharts
基于準備好的dom初始化echarts實例，繪制圖表。因為該項目是基于vue，所以需要在mounted生命周期中進行這一步（獲取dom，需要在頁面掛載完成后進行）。
（1）柱狀圖實例
通過axios獲取后臺數(shù)據(jù)。（注意：axios需要先安裝，再導入）
導入axios
import axios from "axios";
export default {
name: "Test",
data() {
return {
定義一份數(shù)據(jù)
list: [],
};
},
methods: {
加載數(shù)據(jù)的方法
async getList() {
向后臺發(fā)送請求，獲取一份數(shù)據(jù)
let {data} = await axios.get("data/data2.json");
this.list = data
this.showdata()
},
渲染數(shù)據(jù)的方法
showdata() {
基于準備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById("main"));
繪制圖表
myChart.setOption({
title: {
text: "產品銷售信息",
// 副標題
subtext: "2021-12-08",
},
圖例組件
legend: {},
tooltip: {},
// X軸信息
xAxis: {
// 產品名稱數(shù)據(jù)作為X軸信息展示
data: this.list.map((r) => r.title),
},
Y軸信息
yAxis: {},
系列
series: [
{
name: "銷量",
type: "bar",
data: this.list.map((r) => r.xl),
},
{
name: "庫存",
type: "bar",
data: this.list.map((r) => r.kc),
},
],
});
},
},
/頁面掛載完成
mounted() {
this.getList();
},
};
數(shù)據(jù)：
[
{
"title": "襯衫",
"xl": 5,
"kc": 9
},
{
"title": "羊毛衫",
"xl": 20,
"kc": 19
},
{
"title": "雪紡衫",
"xl": 36,
"kc": 55
},
{
"title": "褲子",
"xl": 10,
"kc": 2
},
{
"title": "高跟鞋",
"xl": 10,
"kc": 5
},
{
"title": "襪子",
"xl": 20,
"kc": 35
}
]
效果：
（2）餅圖實例
export default {
name: "News",
data() {
return {
list: [
{ value: 40, name: "游泳" },
{ value: 38, name: "跳水" },
{ value: 32, name: "短跑" },
{ value: 30, name: "長跑" },
{ value: 28, name: "扔鉛球" },
{ value: 26, name: "舉重" },
{ value: 22, name: "劃船" },
{ value: 18, name: "打排球" },
],
};
},
mounted() {
基于準備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById("container"));
繪制圖表
myChart.setOption({
標題
title: {
text: "運動項目",
},
提示框組件
tooltip: {
觸發(fā)類型：axis,item,none
trigger: "item",
},
圖例組件
legend: {
圖例組件離容器上側的距離
top: "bottom",
},
工具欄
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
restore: { show: true },
saveAsImage: { show: true },
},
},
series: [
{
系列名稱
name: "series",
類型，餅圖
type: "pie",
radius: [50, 250],
餅圖的中心（圓心）坐標，數(shù)組的第一項是橫坐標，第二項是縱坐標。
center: ["50%", "50%"],
是否展示成南丁格爾圖，通過半徑區(qū)分數(shù)據(jù)大小?？蛇x擇兩種模式：
'radius' 扇區(qū)圓心角展現(xiàn)數(shù)據(jù)的百分比，半徑展現(xiàn)數(shù)據(jù)的大小。
'area' 所有扇區(qū)圓心角相同，僅通過半徑展現(xiàn)數(shù)據(jù)大小。
roseType: "area",
圖形樣式
itemStyle: {
用于指定餅圖扇形區(qū)塊的內外圓角半徑
borderRadius: 8,
},
data: [
name：數(shù)據(jù)項名稱
value：數(shù)據(jù)值
...this.list.map((r) => {
return {
value: r.value,
name: r.name,
};
}),
],
},
],
});
},
};
