一、本节内容

1. 掌握项目环境中路由的配置方法 *****
2. 熟练掌握编写单文件组件的编写 ***
3. 能够使用swiper.js进行轮播图组件的封装
4. 能够使用axios进行数据请求

二、webpack项目的目录结构的详细解析

以下是对webpack项目的配置详细说明，在这边说明需要说明的是： build、config、node_modules、static文件夹基本都暂时不需要改动，只有src文件夹下才是我们需要开发的代码。

关于webpack的详细安装，以及部分使用，请查看：https://www.cnblogs.com/zhangqigao/p/9604100.html

三、项目环境中路由配置

3.1、配置一级路由

配置一级路由的思路：

• 准备一级路由模块
• 配置一级路由的信息

说明：根据上面的图所示，一级路由是配置是在src -> router ->  index.js 下的。首先我们先创建两个页面的组件，然后通过路由指向 页面的组件。

1、在src-> 手动创建pages->手动创建Home->home.vue和Mine->mine.vue单文件组件(mine.vue组件跟home.vue组件一样)

2、在src -> router ->  index.js 目录下配置 一级路由：

然后分别请求 链接调试：http://localhost:8080/#/home

注意：这边还有一个需要强调的是，app.vue组件中所有的标签或者添加的组件，所有页面都看的到，是所有页面公用的。如果想所有页面都需要这个标签或者组件的话，就在app.vue中添加。如图：

3.2、二级路由的配置

说明：二级路由是在一级路由的基础上配置的，也是在index.js配置的。

配置二级路由的目的：因为我们在一级路由下面还有很多其他页面，所以我们还需配置二级路由：比如 在home目录下，你要访问 film页面： http://localhost:8080/#/home/film这种效果。

配置二级路由的思路：

• 准备二级路由模块
• 配置二级路由路径信息
• 更改HTML结构

1、准备二级路由模块和配置二级路由信息

2、更改HTML结构

效果图：输入：http://localhost:8080/#/home/film，并且显示film.vue组件中的内容。

3.3、改进二级路由HTML结构

说明：改进后的HTML结构需要在 router-link外面包裹一个 span标签，以方便与 绑定指令。

<template><div>home<div class="nav"><span :class="{active: nowIndex==0}" @click="nowIndex=0"><router-link to="/home/film">电影</router-link></span><span :class="{active: nowIndex==1}" @click="nowIndex=1"><router-link to="/home/read">读书</router-link></span><span :class="{active: nowIndex==2}" @click="nowIndex=2"><router-link to="/home/tv">电视</router-link></span></div><div><router-view></router-view></div></div>
</template><script>export default{components: {},data: function(){return {nowIndex: 0}}}
</script>

home.vue

这个后续会持续优化。

四、单文件组件的编写

4.1、引用单文件组件

说明：我们再父组件中，经常回去引用子主见，那我们如何在一个单文件组件中去调用其他组件呐，或者去引用其他组件呐。

思路：

• 定义子组件
• 在父组件中导入子组件，并且注册

定义子组件，上面我们已经说过了，下面我们就来看看子父组件中导入子组件，并且完成注册。当然这边可以引用多个Home组件，如图只引用了一个Home组件，比如，我经常用的button，就可以一个页面上使用多个。

4.2、在单文件组件中设置样式

说明：直接在单文件组件下方，添加<style>标签然后设置即可。

4.3、props和slot槽口的使用

说明：(props)我们组件可能只有一套，只是往不同的组件中传入不同的值而已。（slot）槽口，就是说每个页面可能都要一个图片，或者，每个页面都要一个标签，那么我们就会给每个页面预留一个槽口，如果说这个槽口只有一个，那我们就用匿名槽口，但是有多个，我们就用 具名槽口

这边强调一下，可以在span标签上做任何指令的，这边就不一一诉说了。

<span v-show="bol"><slot name="activeImg"></slot></span>

父子组件传值以及跳转：https://www.cnblogs.com/zhangqigao/p/9604086.html，重定向：this.$router.push('/' + this.mark)；

重定向：在script中 在 beforeCreate之前 重定向：

beforeCreate: function(){this.$router.push('/');
}

这个重定向，一般是重新刷新一下首页的时候，会用到。

五、swiper.js进行轮播图组件的封装

5.1、思路分析

• 掌握swiper.js 插件的使用方法
• 利用 swiper.js 插件封装轮播图插件

swiper.js的官方网站：https://www.swiper.com.cn

如何学习请查看 ： 中文教程  和  api文档

在正常的页面中我们就不详细说了，这个中文教程里面有。我们主要看看，在vue中如何使用轮播图

5.2、vue中使用轮播图

1、先下载swiper.js和swiper.css并且在src ->  asserts -> libs(手动创建) 中分别 放入

2、创建轮播图组件banner.vue

主要注意的是：

导入swiper.js 的方式：

<script>import '../assets/libs/swiper/js/swiper.min.js'  //引入第三方js库
</script>

导入swiper.css的方式：

<style>@import "../assets/libs/swiper/css/swiper.min.css"; /*引入第三方css库，注意了，这边引入的时候，最后一定要加分号(;)*/
</style>

banner.vue的组件内容：

<template><div class="banner"><div class="swiper-container"  :class="swiperid"><div class="swiper-wrapper"><slot name="swiper-con"></slot></div><div :class='{"swiper-pagination":paginationshow}' :style='{"text-align":paginationdesition}'></div></div></div>
</template><script>import '../assets/libs/swiper/js/swiper.min.js'  //引入第三方js库
  export default {props: {    //props的高级使用，type表示传入的字符类型，default表示默认值
      swiperid: {type: String,default: ''},paginationshow: {type: Boolean,default: true},paginationdesition: {type: String,default: 'center'},},mounted: function(){var _this = thisnew Swiper('.' + _this.swiperid,{direction: _this.declarations,loop: _this.loop,//....还有其他效果
      })}}
</script><style>@import "../assets/libs/swiper/css/swiper.min.css"; /*引入第三方css库，注意了，这边引入的时候，最后一定要加分号(;)*/
</style>

banner.vue

3、引用轮播图

说明：在我们的主页面home.vue页面引用我们的banner.vue

<template><div>home<!--应用轮播图--><Banner  swiperid="go"><div slot="swiper-con" class="swiper-slide"><img src="../../assets/images/logo.png"></div></Banner>
</template><script>import Banner from '../../components/banner'  //导入banner组件
  export default{components: {Banner  注册banner组件},data: function(){return {nowIndex: 0}}}
</script>

home.vue

小结技巧：可通过设置props选项的默认值，来增强组件的灵活性。

六、axios请求数据

6.1、目标

• 使用axios请求数据
• 将请求到的数据展示在页面中

6.2、思路分析

• 配置axios请求所需环境
• 进行axios请求
• 将请求到的数据进行存储和展示

6.3、axios请求环境配置

• axios 和 vue-axios文件夹复制到node_modules 中
• 在src中将data文件夹复制进去

如果没有的话，一般都是在线安装

>>> cd  项目
>>>npm install --save axios vue-axios

然后在你的main.js文件中，添加如下配置：

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'Vue.use(VueAxios, axios)

如果你要把文件存在本地的话，那就还需要配置其他：

6.4、网络请求方式

this.axios.get('/api/homeData').then(response) => {console.log(response.data.data.recommend_feeds);}

如图展示：

总结：axios是vue.js提倡使用的另一个网络请求的库，目前应用越来越广泛。

更多关于 axios的详细资料：https://www.npmjs.com/package/axios，https://www.cnblogs.com/zhangqigao/p/10557670.html