五、初始Vue-Cli、路由以及路由传参

① 安装Vue-Cli

npm install -g @vue/cli
# OR
yarn global add @vue/cli

② 常用的插件Element-UI、Echarts、swiper安装和使用

1.Element-UI

安装

npm install element-ui

导入（main.js文件）（全局导入）

import Vue from 'vue';
import ElementUI from 'element-ui';  // 导入element-ui组件库
import 'element-ui/lib/theme-chalk/index.css';  // 导入element-ui组件库的样式
import App from './App.vue';
Vue.use(ElementUI);   // 注意：element-ui组件库，是一个插件，所有的插件都要由Vue去use
new Vue({
  el: '#app',
  render: h => h(App)
});

2.Echarts

安装

npm install echarts --save

 引入 ECharts

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      // 用户接收后台返回的数据
      list: [],
    };
  },
  created() {
    // 发送ajax请求，获取数据
    this.list = [
      {
        name: "衬衫",
        count: 5,
      },
      {
        name: "羊毛衫",
        count: 20,
      },
      {
        name: "雪纺衫",
        count: 36,
      },
      {
        name: "裤子",
        count: 10,
      },
      {
        name: "鞋子",
        count: 50,
      },
    ];
  },
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("main"));
    // 绘制图表
    myChart.setOption({
      title: {
        text: "ECharts 入门示例",
      },
      tooltip: {},
      xAxis: {
        data: this.list.map((p) => p.name),
      },
      yAxis: {},
      series: [
        {
          name: "销量",
          type: "bar",
          data: this.list.map((p) => p.count),
        },
      ],
    });
  },
};
</script>

3.swiper

低版本安装

npm install swiper@5 vue-awesome-swiper@4 --save

 全局导入（main.js文件）

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

局部导入

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

使用

    <swiper ref="mySwiper" :options="swiperOptions">
      <swiper-slide><img src="/image/banner1.jpg" /></swiper-slide>
      <swiper-slide><img src="/image/banner2.jpg" /></swiper-slide>
      <swiper-slide><img src="/image/banner3.jpg" /></swiper-slide>
      <swiper-slide><img src="/image/banner4.jpg" /></swiper-slide>
      <swiper-slide><img src="/image/banner5.jpg" /></swiper-slide>
      <swiper-slide><img src="/image/banner6.jpg" /></swiper-slide>
      <swiper-slide><img src="/image/banner7.jpg" /></swiper-slide>
      <swiper-slide><img src="/image/banner8.jpg" /></swiper-slide>
      <!--左箭头。如果放置在swiper-container外面，需要自定义样式。-->
      <div class="swiper-button-prev" slot="button-prev"></div>
      <!--右箭头。如果放置在swiper-container外面，需要自定义样式。-->
      <div class="swiper-button-next" slot="button-next"></div>
      <div class="swiper-pagination" slot="pagination"></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',
            }
        },
    };},

③ 路由

1. 安装

npm install vue-router

2. 导入

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

3. 创建路由器

import Index from '../pages/Index.vue' // 导入页面组件
export default new VueRouter({  // 创建一个路由器对象
//定义当前路由器对象管理的路由信息
 routes:[
      //每一条路由信息，需要配置一个对象
      {
        //路由路径
        path:'/',
        //路由名称
        name:'Index'
        //路由组件
        component:Index
      }
    ]
 })

4. 配置路由器

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

5. 使用路由

5.1. 路由组件跳转

    <!-- 路由链接，用于跳转路由，to属性设置路由路径 ,router-link会默认被渲染为a标签-->
    <router-link to="/page1">到页面1</router-link>&nbsp;
    <router-link to="/page2">到页面2</router-link>&nbsp;
    <router-link to="/page3">到页面3</router-link>&nbsp;
    <!-- 通过tag属性可以重新设置渲染后的标签类型但是在Vue-conter4已经被移除了，
     vue推荐用插槽方法实现，但是这样就是在a标签里面嵌入按钮标签会增加结构复杂度-->
    <!-- <router-link to="/page3" tag="button">到页面3</router-link>&nbsp; -->
    <router-link to="/page3"> <button>到页面3</button> </router-link>&nbsp;
    <button @click="toPage2">到页面2</button>
    <button @click="toPage1">到页面1</button>
    <!-- 路由视图，用于显示路由组件，当浏览器的地址栏中切换到指定的路由路径时，
    就会在router-view中显示对应的路由组件。-->
    <router-view></router-view>

5.2. 编程式路由跳转

this.$router里面保存的是我们在vue实例上添加的路由器对象。

this.$route里面保存的是当前路由信息。

$router就是当前项目中的路由器对象，它的push方法，用于跳转路由。push方法是在浏览器的历

史记录中，添加一个路由信息。replace方法，也是用于跳转路由。replace方法是在浏览器的历史

记录中，替换前一条路由信息。

 methods: {
    toPage2() {
      if (this.$route.path != "/page2") this.$router.push("/page2");
    },
    toPage1() {
      if (this.$route.path != "/page1") this.$router.replace("/page1");
    },
  },

6.路由传参

1. params 参数

路由配置

routes: [
        //配置首页路由
        {
            path: '/',
            component: () => import('@p/Home.vue')
        },
        //配置列表页路由
        {
            // 注意：这里的路由需要传一个参数，路由可以传多个参数
            //设置路由参数 方法是 :xxx
            path: '/list/:id',
            // 设置该选项为true，组件可以通过props选项接收路由参数
            props: true,
            component: () => import('@p/List.vue')
        },
        {
            path: '/list2',
            component: () => import('@p/List2.vue')
        },
        //配置content路由
        {
            path: '/content',
            //@是src的别名
            component: () => import('@/pages/Content.vue')
        }
    ]

页面

<template>
  <div>
    <h2>首页</h2>
    <h3>通过params和props方法传参</h3>
    <ul>
      <li v-for="(item, index) in types" :key="index">
        <router-link :to="`/list/${item}`">{{ item }}</router-link>
        <!-- 上面的to属性要添加绑定-->
      </li>
    </ul>  
  </div>
</template>

组件 

<script>
export default {
  name: "List",
  // 使用props选项接收路由参数
  props: ["id"],
  data() {
    return {
      goodList: [
        {
          type: "手机",
          name: "小米手机",
        },
        {
          type: "手机",
          name: "三星手机",
        },
        {
          type: "手机",
          name: "苹果手机",
        },
        {
          type: "手机",
          name: "华为手机",
        },
        {
          type: "数码",
          name: "尼康相机",
        },
        {
          type: "数码",
          name: "索尼相机",
        },
        {
          type: "数码",
          name: "大疆相机",
        },
        {
          type: "数码",
          name: "佳能相机",
        },
        {
          type: "百货",
          name: "可狄",
        },
        {
          type: "百货",
          name: "奢吧",
        },
        {
          type: "百货",
          name: "柏登居",
        },
        {
          type: "百货",
          name: "天南兄弟",
        },
        {
          type: "生鲜",
          name: "安井",
        },
        {
          type: "生鲜",
          name: "思念",
        },
        {
          type: "生鲜",
          name: "广州酒家",
        },
        {
          type: "生鲜",
          name: "粮全其美",
        },
      ],
      // type: "",
    };
  },
  computed: {
    currentGoodes() {
      if (this.id == "") {
        return [];
      } else {
        return this.goodList.filter((g) => g.type == this.id);
      }
    },
  },
  // mounted() {
  //   // $route返回的是当前路由信息，它身上有一个params属性，该属性里面保存的是当前路由信息的参数。
  //   let {params: { id }} = this.$route;
  //   this.type = id;
  // },
};
</script>

2. query参数

<template>
  <div>
    <h3>通过query方法传参</h3>
    <ul>
      <!-- 路由地址，采用query传参方式：?参数1=XXX&参数2=XXX... -->
      <li v-for="(item, index) in types" :key="index">
        <router-link :to="`/list2?type=${item}`">{{ item }}</router-link>
        <!-- 上面的to属性要添加绑定-->
      </li>
    </ul>
  </div>
</template>

组件 

<script>
export default {
  name: "List",
  data() {
    return {
      goodList: [
        {
          type: "手机",
          name: "小米手机",
        },
        {
          type: "手机",
          name: "三星手机",
        },
        {
          type: "手机",
          name: "苹果手机",
        },
        {
          type: "手机",
          name: "华为手机",
        },
        {
          type: "数码",
          name: "尼康相机",
        },
        {
          type: "数码",
          name: "索尼相机",
        },
        {
          type: "数码",
          name: "大疆相机",
        },
        {
          type: "数码",
          name: "佳能相机",
        },
        {
          type: "百货",
          name: "可狄",
        },
        {
          type: "百货",
          name: "奢吧",
        },
        {
          type: "百货",
          name: "柏登居",
        },
        {
          type: "百货",
          name: "天南兄弟",
        },
        {
          type: "生鲜",
          name: "安井",
        },
        {
          type: "生鲜",
          name: "思念",
        },
        {
          type: "生鲜",
          name: "广州酒家",
        },
        {
          type: "生鲜",
          name: "粮全其美",
        },
      ],
      type: "",
    };
  },
  computed: {
    currentGoodes() {
      if (this.type == "") {
        return [];
      } else {
        return this.goodList.filter((g) => g.type == this.type);
      }
    },
  },
  mounted() {
    // 通过$route.query获取路由地址?后面的参数 
    let { query: { type }} = this.$route;
    this.type = type;
  },
};
</script>

3. vue.config.js

//导入node.js的内置模块
let path = require('path')
// 注意：该配置文件中，只能使用commonjs模块化语法
module.exports = {
    //是否在开发环境下使用eslint-looder做语法检查
    lintOnSave: false,
    //生成的生产环境构建文件的目录(打包文件存放的目录)，默认是dist,一般不需要更改
    outputDir: 'dist',
    //开发服务器设置
    devServer: {
        //设置开发服务器的端口号
        port: 8848,
        //开发服务器打开后，直接开启
        open: true
    },
    //设置webpack的原始设置
    configureWebpack: {
        // 解析
        resolve: {
            //给一些常用的路径配置别名
            alias: {
                '@p': path.resolve(__dirname, 'src/pages'),
                '@c': path.resolve(__dirname, 'src/components')
            }
        }
    }
}