Vue框架和Axios实战:音乐播放器项目-音乐列表

简介: Vue框架和Axios实战:音乐播放器项目-音乐列表

利用目前流行的Vue框架和Axios进行跨域请求百度音乐接口、结合swiper来布局的比较综合性的前端项目

1.创建项目

首先利用脚手架构建Vue项目(如:vueMusic),通过NPM安装Axios插件。并在main.js中导入并初始化配置:

2.调整项目结构

调整项目结构,删除HelloWorld.vue组件及相关配置。components用于存放公共的组件页面,在src下新建pages文件夹用于存放页面组件。在App.vue中设置初始化样式,代码如下:

3.创建MusicList页面

在components目录下建立公共组件MusicList.vue,用于存放歌曲列表,代码如下:

4.创建首页组件

在pages目录下新建首页组件index.vue,初始化并配置路由,代码如下:

将MusicList.vue组件导入首页中,代码如下:

页面显示效果如图


相关文章
|
1天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的销售项目流程化管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的销售项目流程化管理系统附带文章源码部署视频讲解等
14 3
|
1天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的项目申报管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的项目申报管理系统附带文章源码部署视频讲解等
14 3
|
2天前
|
JavaScript API
【vue实战项目】通用管理系统:信息列表,信息的编辑和删除
【vue实战项目】通用管理系统:信息列表,信息的编辑和删除
12 2
|
2天前
|
JavaScript 前端开发 API
【vue实战项目】通用管理系统:学生列表
【vue实战项目】通用管理系统:学生列表
12 2
|
2天前
|
缓存 JavaScript
【vue实战项目】通用管理系统:首页
【vue实战项目】通用管理系统:首页
9 2
|
3天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的项目申报系统的设计与实现附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的项目申报系统的设计与实现附带文章源码部署视频讲解等
30 12
|
3天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的大学生双创竟赛项目申报与路演管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的大学生双创竟赛项目申报与路演管理系统附带文章源码部署视频讲解等
11 1
|
8天前
|
缓存 JavaScript 前端开发
Nuxt.js实战:Vue.js的服务器端渲染框架
Nuxt.js提供了开发、构建和部署的完整工作流。使用nuxt命令启动开发服务器,nuxt build进行生产构建,nuxt start启动生产服务器
16 0
|
8天前
|
JavaScript 前端开发 API
|
8天前
|
资源调度 JavaScript