Vue音乐页面导航栏与轮播图的配置

发现页面

建立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 
 4 
 5 

分块制作发现页面:

导航栏

1.新建components / topNav.vue

2.联系topNav.vue 与 HomeView.vue

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

3.在topNav.vue中布置页面内容

注意:引入矢量图

在public / index.html title下中引入

在页面使用:

icon-lb:改为所需图片代码

轮播图

1.新建components / swiperCom.vue

2.联系swiperCom.vue 与 HomeView.vue

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

引入安装轮播图

接口封装

在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//分页器是否可以点击
                }
            })}