發現頁面

建立HomeView.vue與App.vue間的聯絡:

在router/index .js 下

 1 import { createRouter, createWebHistory } from 'vue-router'
 2 import HomeView from '../views/HomeView.vue'
 3 
 4 const routes = [
 5   {
 6     path: '/',
 7     name: 'home',
 8     component: HomeView
 9   }
10 ]
11 
12 const router = createRouter({
 
13   history: createWebHistory(process.env.BASE_URL),
14   routes
15 })
16 
17 export default router

 1 <template>
 2   <router-view/>
 3 </template>
 4 
 5 <style lang="less">
 6  *{
 7    margin: 0;
 8    padding: 0;
 9    box-sizing: border-box;
10    font-family: '微軟雅黑';
11
 
  }
12   .icon{
13     width: 0.3rem;
14     height: 0.3rem;
15   }
16 </style>

分塊製作發現頁面:

導航欄

1.新建components / topNav.vue

2.聯絡topNav.vue 與 HomeView.vue

在HomeView.vue 中引入配置topNav.vue

<template>
    <div class="home">
        <toNav></toNav>
    </div>
</template>

<script>
    import topNav from 
 
"@/components/topNav.vue";

    export default {
        name: 'HomeView',
        components: {
            topNav
        }
    }
</script>

3.在topNav.vue中佈置頁面內容

<template>
    <div class="topNav">
        <div class="topLeft">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-lb"></use>
            </svg>
        </div>
        <div class="topCenter">
            <span class="navBtn">我的</span>
            <span class="navBtn active">發現</span>
            <span class="navBtn">雲村</span>
            <span class="navBtn">視訊</span>
        </div>
        <div class="topRight">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-sousuo"></use>
            </svg>
        </div>
    </div>
</template>

<script>
    export default {
        name: "TopNav"
    }
</script>

<style lang="less" scoped>
    .topNav {
        width: 7.5rem;
        height: 1rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 0.2rem;

        .icon {
            width: 0.5rem;
            height: 0.5rem;
        }

        .search {
            width: 0.45rem;
            height: 0.45rem;
        }

        .topCenter {
            width: 4.5rem;
            display: flex;
            justify-content: space-around;

            .active {
                font-weight: 900;
            }
        }

    }
</style>

注意:引入向量圖

在public / index.html title下中引入

<script src="//at.alicdn.com/t/font_3349404_tp1aq4cfulk.js"></script>
<link rel="stylesheet" href="//at.alicdn.com/t/font_2116323_wrykyjzwea.css">

在頁面使用:

<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-lb"></use>
</svg>
icon-lb:改為所需圖片程式碼

輪播圖

1.新建components / swiperCom.vue

2.聯絡swiperCom.vue 與 HomeView.vue

在HomeView.vue 中引入配置swiperCom.vue

引入安裝輪播圖

<!--        在music003中安裝輪播圖安裝包-->
<!--        npm i swiper vue-awesome-swiper --save   -->
<!--        npm i swiper@5 --save -->

<template>
    <div id="swipercom">
        <div class="swiper-container" id="swiperIndex">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(item,i) in imgs" :key="i">
                    <img :src="item.pic" alt="">
                </div>
            </div>
            <!--分頁器-->
            <div class="swiper-pagination"></div>
        </div>
    </div>
</template>

<script>
    // 引入輪播圖
    import 'swiper/css/swiper.css'
    import Swiper from 'swiper

    export default {
        name: "swiperCom",
        data() {
            return {
                imgs: [{}, {}, {}]
            }
        }
    }
</script>

介面封裝

在src 下新建api資料夾,放入 index.js

從http://localhost:3000/ 網易雲API中找到介面

//介面封裝
import axios from 'axios'

let baseUrl='http://localhost:3000'

//獲取輪播圖api /banner?type=2 type:資源型別,對應以下型別:
//0:pc
//1:android
//2:iphone
// 3:i pad
export function getBanner(type=0) {
    // ``飄號可以解析變數baseUrl
    //模板字串
    return axios.get(`${baseUrl}/banner?type=${type}`)
}

import {getBanner} from '@/api/index'

 async created() {
            let res = await getBanner(1)
            this.imgs = res.data.banners.slice(2,5)
        },
        mounted() {
            //傳送ajax,呼叫請求輪播圖圖片的函式,拿到資料
            // let res = await getBanner(1)
            // this.imgs = res.data.banners.slice(2,5)
            var mySwiper = new Swiper('#swiperIndex', {
                // 分頁器
                pagination: {
                  el: ".swiper-pagination",//分頁器與那個標籤關聯
                    clickable: true//分頁器是否可以點選
                }
            })}