Vue-cli（2）--初始路由&swiper插件&ECharts插件

一、安装

打开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文件。

三、创建路由

在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里面执行以下代码。

2、编程式路由跳转

二、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、 使用

三、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、使用