可参考官方文档，地址：https://router.vuejs.org/zh/
Vue Router 路由：是Vue.js官方的路由管理器，可以实现页面的跳转
初始路由
1.安装路由
终端打开，输入指令
npm install vue-router
2.导入路由
import VueRouter from 'vue-router'
3.使用路由
Vue.use(VueRouter)
4.创建路由器对象
const router = new VueRouter({
//每一条路由信息，都是一个对象
routes: [{
path: '/home',
name:home,
component: Home
}, {
path: '/list',
name:list,
component: List
}]
});
5.导入路由组件
import Home from '../pages/home.vue'
import List from '../pages/list.vue'
使用路由
1.路由组件跳转
<!-- 路由链接，用于跳转路由，to属性设置路由路径 -->
<router-link to="/">首页</router-link>
<!-- 路由视图，用于显示路由组件，当浏览器的地址栏中切换到指定的路由路径时，
就会在router-view中显示对应的路由组件。-->
<router-view></router-view>
路由编程式跳转
编程式路由跳转，可以在跳转之前，做各种验证，比如判断权限等等。
router是当前vue实例里面的路由器对象。
push方法：用于跳转路由，在浏览器的历史记录中，添加一个路由信息。需要注意，不能反复push同一个路由地址。
replace方法：也是用于跳转路由。它用当前地址替换历史记录里面的最近一条地址。
<button @click="gotoHome">首页</button>
<button @click="gotoList">列表</button>
<router-view></router-view>
// $router就是当前项目中的路由器对象，它的push方法，用于跳转路由
// replace方法，也是用于跳转路由。
// push方法是在浏览器的历史记录中，添加一个路由信息
// replace方法是在浏览器的历史记录中，替换前一条路由信息
methods: {
gotoHome() {
if (this.$route.path !== "/home") {
this.$router.push("/home");
}
},
gotoList() {
if (this.$route.path !== "/list") {
this.$router.push("/list");
}
}
}
swiper组件
swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。Swiper能实现触屏焦点图、触屏Tab切换、触屏轮播图切换等常用效果。
1.安装
npm install swiper@5 vue-awesome-swiper@4
2.导入
2.1全局导入（在入口文件main.js中全局导入。）
// 导入swiper
import VueAwesomeSwiper from 'vue-awesome-swiper'
// 导入swiper的样式
import 'swiper/css/swiper.css'
// 因为swiper是插件，所以要use
Vue.use(VueAwesomeSwiper)
2.2局部导入
在需要使用swiper插件的页面组件中引入。
局部导入的优势：只有在页面组件使用swiper插件时，才会引入插件，起到一个懒加载作用；全局导入不管是否使用，都会引入。局部更有利于性能优化，全局更方便开发。
// 导入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属性设置配置选项 -->
<swiper :options="swiperOptions">
<!-- swiper组件的每一项 -->
<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>
</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';
3.准备容器
<div class="charts">
<h3>使用ECharts</h3>
<div id="main"></div>
</div>
4.选择示例图
在官网选择示例图并下载示例。
5.引入 ECharts
基于准备好的dom初始化echarts实例，绘制图表。因为该项目是基于vue，所以需要在mounted生命周期中进行这一步（获取dom，需要在页面挂载完成后进行）。
柱状图实例
通过axios获取后台数据。（注意：axios需要先安装，再导入）
// 导入axios
import axios from "axios";
export default {
name: "Test",
data() {
return {
// 定义一份数据
list: [],
};
},
methods: {
// 加载数据的方法
async getList() {
// 向后台发送请求，获取一份数据
let {data} = await axios.get("data/data2.json");
this.list = data
this.showdata()
},
// 渲染数据的方法
showdata() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById("main"));
// 绘制图表
myChart.setOption({
title: {
text: "产品销售信息",
// 副标题
subtext: "2021-12-08",
},
// 图例组件
legend: {},
tooltip: {},
// X轴信息
xAxis: {
// 产品名称数据作为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();
},
};
数据：
[
{
"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
}
]
饼图实例
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: {
// 触发类型：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],
// 饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。
center: ["50%", "50%"],
// 是否展示成南丁格尔图，通过半径区分数据大小。可选择两种模式：
// 'radius' 扇区圆心角展现数据的百分比，半径展现数据的大小。
// 'area' 所有扇区圆心角相同，仅通过半径展现数据大小。
roseType: "area",
// 图形样式
itemStyle: {
// 用于指定饼图扇形区块的内外圆角半径
borderRadius: 8,
},
data: [
// name：数据项名称
// value：数据值
...this.list.map((r) => {
return {
value: r.value,
name: r.name,
};
}),
],
},
],
});
},
};
