当前位置: 开发笔记 > 编程语言 > 正文

第10章-Vue.js项目实战

作者：hanjing0118 | 来源：互联网 | 2023-08-15 12:29

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

一、本节内容

掌握项目环境中路由的配置方法 *****
熟练掌握编写单文件组件的编写 ***
能够使用swiper.js进行轮播图组件的封装
能够使用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、在单文件组件中设置样式

说明：直接在单文件组件下方，添加

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 = this
      new 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

第10章-Vue.js项目实战

3.1、配置一级路由

3.2、二级路由的配置

3.3、改进二级路由HTML结构

4.1、引用单文件组件

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

6.1、目标

6.2、思路分析

6.3、axios请求环境配置

6.4、网络请求方式

Webpack 初探：Import 和 Require 的使用

如何撰写初级和高级前端开发者的专业简历

探讨Vue.js中Prop属性的基础应用与实践

JUC（三）：深入解析AQS

深入解析HTML5字符集属性：charset与defaultCharset

Python 数据可视化实战指南

C语言检测

探索Web 2.0新概念：Widget

网站访问全流程解析

开机自启动的几种方式

秒建一个后台管理系统？用这5个开源免费的Java项目就够了

Vue 开发技巧：实现数据过滤与排序功能详解

2.2 组件间父子通信机制详解

Vue CLI 初始化 Webpack 项目时，main.js 文件是如何被调用的？

Vue应用预渲染技术详解与实践