一、安装

打开Vue Router官网：https://router.vuejs.org/zh/
并且新打开一个终端，在当前demo文件所在的目录里执行以下代码

npm install vue-router

二、导入

打开main.js，在里面执行以下代码。

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

在src文件夹中创建一个新的views文件夹，在里面放页面组件。在views文件夹里面创建Home.vue文件、LIst.vue文件。

<template>
  <div class="home">
      <h2>首页</h2>
  </div>
</template>
<script>
export default {
  name: "Home",
};
</script>
<style>
</style>

<template>
  <div class="list">
      <h2>列表</h2>
  </div>
</template>
<script>
export default {
  name: "List",
};
</script>
<style>
</style>

三、创建路由

在main.js里面创建路由器对象

//导入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
    },
  ]
})

四、配置路由

new Vue({
  render: h => h(App),
  //将路由器对象传给vue实例。
  router
}).$mount('#app')

五、使用路由

1、路由组件跳转

在App.vue里面执行以下代码。

<template>
  <div id="app">
   <div class="header">
      <!-- router-link是路由链接组件，用于跳转 -->
     <router-link to='/home'>首页</router-link>&nbsp;
     <router-link to='/list'>列表页</router-link>&nbsp;
   </div>
     <!-- router-view是路由视图组件，用于呈现路由界面 -->
     <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
</script>

<style>
*{
  margin: 0;
  padding: 0;
  list-style: none;
}
#app {
  padding: 10px;
  margin: 10px;
  border: 1px solid black;
}
</style>

2、编程式路由跳转

<template>
  <div id="app">
   <div class="header">
      <!-- router-link是路由链接组件，用于跳转 -->
     <router-link to='/home'>首页</router-link>&nbsp;
     <router-link to='/list'>列表页</router-link>&nbsp;
    <button @click="gotoAbout">关于</button>&nbsp;
     <button @click="gotoNews">新闻</button>
   </div>
     <!-- router-view是路由视图组件，用于呈现路由界面 -->
     <router-view></router-view>
     <div class="footer">
       关于百度About Baidu使用百度前必读帮助中心京公网安备11000002000001号
     </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    //编程式路由跳转，可以在跳转之前，做各种验证，比如判断权限等。
    gotoAbout(){
      //$route返回的是当前路由信息
      //$router返回的是当前vue实例里面的路由器对象。
      //通过push方法跳转路由，并将路由地址添加到历史记录。
      //通过replace方法，也是跳转路由，他是用当前地址替换记录里面的最后一条地址。
      if(this.$route.path!=='/about'){
        this.$router.push('/about')
      }
    },
    gotoNews(){
      if(this.$route.path!=='/news'){
        this.$router.push('/news')
      }
    }
  },
}
</script>

<style>
*{
  margin: 0;
  padding: 0;
  list-style: none;
}
#app {
  padding: 10px;
  margin: 10px;
  border: 1px solid black;
}
.header{
  border: 1px solid #ccc;
  padding: 10px;
  margin: 10px 0;
}
.footer{
  border: 1px solid #ccc;
  margin: 10px;
  font-size: 14px;
  text-align: center;
  padding: 10px;
}
</style>

二、swiper插件

1、安装

重新打开一个终端，在当前demo文件夹的文件目录里执行以下代码

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 在局部导入(在Home.vue里面写)

//局部导入swiper
// 导入swiper的组件
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
// 导入swiper的样式
import "swiper/css/swiper.css";

3、 使用

<template>
  <div class="home">
    <h2>首页</h2>
    <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>
        <!--左箭头。如果放置在swiper-container外面，需要自定义样式。-->
        <div class="swiper-button-prev" slot="button-prev"></div>
        <!--右箭头。如果放置在swiper-container外面，需要自定义样式。-->
        <div class="swiper-button-next" slot="button-next"></div>
      </swiper>
    </div>
  </div>
</template>


<script>
//局部导入swiper
// 导入swiper的组件
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
// 导入swiper的样式
import "swiper/css/swiper.css";

export default {
  name: "Home",
  // 注册组件
  components: {
    Swiper,
    SwiperSlide,
  },
  data() {
    return {
      // 定义swiper的配置选项
      swiperOptions: {
        // 指定分页器
        pagination: {
          //指定分页器的容器
          el: ".swiper-pagination",
          //点击分页器的指示点分页器会控制Swiper切换
          clickable: true,
        },
        // 配置衔接滑动
        loop: true,
        // 配置自动播放
        // autoplay:true
        autoplay: {
          //自动播放
          autoplay: true,
          //设置间隔时间
          delay: 1000,
          // 用户操作swiper之后，是否禁止autoplay
          disableOnInteraction: false,
        },
        // slide的切换效果
        effect: "coverflow",
        // 箭头
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },
    };
  },
};
</script>
<style>
.home {
  border: 1px solid blue;
}
.box {
  width: 750px;
}
.box img {
  width: 100%;
}
</style>

三、ECharts插件

1、安装

ECharts官网：https://echarts.apache.org/zh/index.html
新打开一个终端，在当前demo文件夹文件目录里输入以下代码

npm install echarts --save

2、在局部导入

//导入echarts
import * as echarts from "echarts";
//导入axios
import axios from "axios";

3、使用

<template>
  <div class="list">
    <h2>列表</h2>
    <div id="container"></div>
  </div>
</template>


<script>
//导入echarts
import * as echarts from "echarts";
//导入axios
import axios from "axios";

export default {
  name: "List",
  data() {
    return {
      //定义一份数据
      list: [],
    };
  },
  //方法
  methods: {
    //加载数据的方法
    async loadData() {
      //向后台发送请求，获取一份数据
      let { data } = await axios.get("data/data1.json");
      this.list = data;
      //调用渲染数据的方法
      this.showData()
    },
    //渲染数据的方法
    showData() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("container"));
      myChart.setOption({
        //标题
        title: {
          text: "Stacked Line",
        },
        //提示框组件
        tooltip: {
          trigger: "axis",
        },
        //图例组件
        legend: {
          data: this.list.map((r) => r.name),
        },
        //网格
        grid: {
          left: "5%",
          right: "5%",
          bottom: "5%",
          //网格空间是否包含文本
          containLabel: true,
        },
        //工具栏
        toolbox: {
          //各工具配置项
          feature: {
            //另存为图片
            saveAsImage: {},
          },
        },
        //X轴数据
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
        },
        //Y轴数据
        yAxis: {
          type: "value",
        },
        //系列
        series: this.list.map((r) => {
          return {
            name: r.name,
            type: "line",
            data: r.moneys.map((h) => h.money),
          };
        }),
      });
    },
  },
  //数据创建完成
  create() {},
  //页面挂载完成
  mounted() {
    this.loadData();
  },
};
</script>
<style>
.list {
  border: 1px solid pink;
}
.list #container {
  width: 1000px;
  height: 600px;
  border: 1px solid #ccc;
}
</style>