Vue-Cli—02.创建Vue Router路由 / Swiper插件 / Echarts库

一、什么是Vue Router路由

Vue Router 它是Vue.js官方的路由管理器。实现页面的跳转，让构建单页面应用变得易如反掌。

二、安装并使用Vue Router路由

1.安装

npm install vue-router

2.导入

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

3.创建路由器

// 导入页面组件
import Home from './pages/Home.vue'
import List from './pages/List.vue'

// 创建路由器对象
export default new VueRouter({
  // 定义当前路由器对象管理的路由信息
  routes: [
    // 每一条路由信息，就是一个对象
    {
      // 路由路径
      path:'/home',
      // 路由名称
      name:'home',
      // 路由组件
      component:Home
    },                                                                                                
    {
      path: '/list',
      name: 'list',
      component: List
    }
  ]
})

4.配置路由器

// 导入当前项目中创建的路由器对象
import router from './router'
new Vue({
  render: h => h(App),
  // 在Vue的实例上，配置一个路由器对象
  router
}).$mount('#app')

5.使用路由

（1）路由组件跳转
router-link是路由链接组件，用于跳转路由。通过传入 to 属性指定链接， 即要显示的内容。
router-link默认会被渲染成一个 <a> 标签。
router-view是路由视图组件，用于呈现路由页面。

<router-link to="/home">首页</router-link>
<router-link to="/list">列表</router-link>
<router-view></router-view>

（2）编程式路由跳转
编程式路由跳转，可以在跳转之前，做各种验证，比如判断权限等等。
$route：返回的是当前路由信息。
$router：是当前vue实例里面的路由器对象。
push方法：用于跳转路由，在浏览器的历史记录中，添加一个路由信息。需要注意，不能反复push同一个路由地址。
replace方法：也是用于跳转路由。它用当前地址替换历史记录里面的最近一条地址。

<button @click="gotoHome">首页</button>&nbsp;
<button @click="gotoList">列表</button>
<router-view></router-view>

  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.全局导入

在入口文件main.js中全局导入。

// 导入swiper
import VueAwesomeSwiper from 'vue-awesome-swiper'
// 导入swiper的样式
import 'swiper/css/swiper.css'
// 因为swiper是插件，所以要use
Vue.use(VueAwesomeSwiper)

3.局部导入

在需要使用swiper插件的页面组件中引入。
局部导入的优势：只有在页面组件使用swiper插件时，才会引入插件，起到一个懒加载作用；全局导入不管是否使用，都会引入。局部更有利于性能优化，全局更方便开发。

// 导入swiper的组件
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
// 导入swiper的样式
import 'swiper/css/swiper.css'
export default {
    // 注册组件
    components: {
        Swiper,
        SwiperSlide
    }
}

4.使用轮播图效果

 <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',
      },
    }
  },
};

4.Echarts库

Echarts是一个基于 JavaScript 的开源可视化图表库。

1.安装

npm install echarts --save

2.导入

import * as echarts from 'echarts';

3.关闭eslint语法检查

  "eslintConfig": {
    "rules": {
      "no-unused-vars": "off"
    }
  }

4.准备容器

  <div class="charts">
    <h3>使用ECharts</h3>
    <div id="main"></div>
  </div>

5.选择示例图

在Echarts官网选择示例图，并下载示例。

6.引入 ECharts

基于准备好的dom初始化echarts实例，绘制图表。因为该项目是基于vue，所以需要在mounted生命周期中进行这一步（获取dom，需要在页面挂载完成后进行）。
（1）柱状图练习
通过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();
  },
};

json数据

[
    {
        "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
    }
]

效果图：

Over!

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。