启动项目

准备工作可以去GitHub上找到网易云API接口的代码，git clone下来

网易云API接口的启动：

node app.js

项目启动：

npm run dev

项目运行部分截图

首页：

MV：

歌手：

项目讲解

使用到的技术

• vue3
• Element-plus
• vite
• router
• axios

一张图可以看出来这个网页都是由各个组件组成的，我用红色的框画出来了

内容中的显示也是一些组件组成的，比如首页中的走马灯：

代码：

    <el-carousel :interval="4000" type="card" height="300px">
        <el-carousel-item v-for="(v,i) in banners" :key="i">
            <img :src="v.imageUrl">
        </el-carousel-item>
    </el-carousel>  

然后在首页中引用这个组件<banner></banner>，只需要引用即可，这里用的setup语法糖import Banner from '../../components/Banner.vue'，但是图片数据是从API接口拿到的，接下来将如何获数据。

获取API的数据

获取数据我从banner获取图片数据来讲解：

export default {
        data() {
            return {
                banners:[]
            }
        },
        mounted() {
            const url=`http://localhost:3000/banner`;       
            this.axios.get(url).then(rs=>{
                console.log(rs);
                this.banners=rs.data.banners;
            }).catch(err=>{
                console.log(err);
            });   //than处理  catch错误处理
        },
    }

data()函数返回一个只包含banners数组的对象，该数组初始为空数组。mounted()钩子函数在组件挂载后立即执行，其作用是异步获取指定URL的banner数据，并将获取的数据赋值给banners数组。在这里，我们使用axios库发起get请求来获取数据。当请求成功时，通过then()函数处理响应数据，并将其存储在banners数组变量中。

可以看出来拿到的数据是一个json，只需要处理就可以获取到自己需要的数据，做出相应的扩展。这里是我通过v-for遍历拿到图片的http地址。

总结

项目结构大概可以看得出来，在views中可以根据自己的需求写出更多丰富多彩的界面来，获取API接口的数据是通过axios。同时写页面的时候需要用组件化思想去书写，有利于复用。