首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

第10章-Vue.js项目实战

作者：hanjing0118 | 来源：互联网 | 2023-08-15 12:29
一、本节内容掌握项目环境中路由的配置方法*****熟练掌握编写单文件组件的编写***能够使用swiper.js进行轮播图组件的封装能够使用axios进行数据请求

一、本节内容

  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、在单文件组件中设置样式

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

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、目标

6.2、思路分析

6.3、axios请求环境配置

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

>>> 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


推荐阅读
author-avatar
hanjing0118
这个家伙很懒，什么也没留下！
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有