一、路由（Vue Router）
Vue Router 是 Vue.js (opens new window)官方的路由管理器。包含的功能有：
- 嵌套的路由/视图表
- 模块化的、基于组件的路由配置
- 路由参数、查询、通配符
- 基于 Vue.js 过渡系统的视图过渡效果
- 细粒度的导航控制
- 带有自动激活的 CSS class 的链接
- HTML5 历史模式或 hash 模式，在 IE9 中自动降级
- 自定义的滚动条行为
1、安装
npm install vue-router
2、导入（入口文件main.js中）
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
3、创建路由器
路由器就是配置路由信息的，所谓路由就是把它当成一个页面的跳转。通过路由器对象配置
（1）创建路由器对象 (在入口文件main.js中）
// 导入页面组件
import Home from './pages/Home.vue'
import List from './pages/List.vue'
const router = new VueRouter({
// 定义路由信息数组
routes:[
// 每一条路由信息，就是一个对象
{
// 路由路径
path:'/home',
// 路由名称
name:'home',
// 路由组件
component:Home //Home是组件名
},
]
})
在路由器对象中需要配置跳转页面。（注意：所有页面的每一个页面组件都单独用一个文件夹保存，在src目录中创建一个views或pages文件夹）
src目录中的components和pages都是组件文件夹，前者为业务组件，后者为页面组件
在pages文件夹中添加组件
image.png
当我们在开发项目时，可能会有很多需要跳转的页面，导致入口文件main.js中的代码增多。在开发项目过程中main.js文件要尽可能的小，所以我们要把部分的代码分离出去。
在src目录新建一个文件夹，一般命名为router，然后新建一个文件index.js。将分离出来的代码接收，再导出
// 导入vue库
import Vue from 'vue'
// 导入路由
import VueRouter from 'vue-router'
// 使用路由
Vue.use(VueRouter)
// 导入Home组件
import Home from '../pages/Home.vue'
// 导入List组件
import List from '../pages/List.vue'
// 创建路由器对象
export default new VueRouter({
// 定义路由信息数组
routes:[
// 每一条路由信息，就是一个对象
{
// 路由路径
path:'/home',
// 路由名称
name:'home',
// 路由组件
component:Home
},
{
// 路由路径
path:'/list',
// 路由名称
name:'list',
// 路由组件
component:List
},
]
})
注意：main.js中的代码被分离之后，需要在里面重新导入（一个文件夹中的index.js文件可以省略），文件中的组件地址也需要改动
4、配置路由器
import router from './router'
new Vue({
render: h => h(App),
// 将路由器对象传给vue实例
router // 简写，相当于router:router
}).$mount('#app')
5、使用路由
（1）路由组件跳转
router-link是路由链接组件，用于跳转路由。通过传入 to 属性指定链接， 即要显示的内容。router-link默认会被渲染成一个 <a> 标签。
router-view是路由视图组件，用于呈现路由页面。
<template>
<div id="app">
<router-link to="/home">首页</router-link>
<router-link to="/list">列表</router-link>
<router-view></router-view>
</div>
</template>
（2）编程式路由跳转
编程式路由跳转，可以在跳转之前，做各种验证，比如判断权限等等。
router是当前vue实例里面的路由器对象。
push方法：用于跳转路由，在浏览器的历史记录中，添加一个路由信息。需要注意，不能反复push同一个路由地址。
replace方法：也是用于跳转路由。它用当前地址替换历史记录里面的最近一条地址。
<template>
<div id="app">
<button @click="gotoAbout">关于</button>
<button @click="gotoNews">新闻</button>
</div>
</template>
<script>
export default {
name: 'App',
methods: {
gotoAbout(){
if(this.$route.path!=='/about'){
this.$router.push('/about')
}
},
gotoNews(){
if (this.$route.path!=='/news') {
this.$router.push('/news')
}
}
},
}
</script>
二、swiper插件
1、安装
npm install swiper@5 vue-awesome-swiper@4
2、导入
（1）全局导入
// 导入swiper
import VueAwesomeSwiper from 'vue-awesome-swiper'
// 导入swiper的样式
import 'swiper/css/swiper.css'
// 因为swiper是插件，所以要use
Vue.use(VueAwesomeSwiper)
（2）局部导入
// 导入swiper的组件
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
// 导入swiper的样式
import 'swiper/css/swiper.css'
export default {
// 注册组件
components: {
Swiper,
SwiperSlide
}
}
3、使用
<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',
}
},
};
},
三、Echarts使用
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、选择示例图
官方文档：https://echarts.apache.org/examples/zh/index.html
选择合适的图标下载
image.png
5、引入Echarts
于准备好的dom，初始化echarts实例，绘制图表。因为该项目是基于vue，所以需要在mounted生命周期中进行这一步（获取dom，需要在页面挂载完成后进行）。
（1）折线图示例
import * as echarts from "echarts";
export default {
name: "List",
mounted() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById("container"));
myChart.setOption({
title: {
text: 'Stacked Line'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Email',
type: 'line',
stack: 'Total',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Union Ads',
type: 'line',
stack: 'Total',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: 'Video Ads',
type: 'line',
stack: 'Total',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: 'Direct',
type: 'line',
stack: 'Total',
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: 'Search Engine',
type: 'line',
stack: 'Total',
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
],
});
},
}
image.png
（2）柱状图示例
通过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
}
]
image.png
