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

音乐播放器项目-音乐列表

    • 1.创建项目
    • 2.调整项目结构
    • 3.创建MusicList页面

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

1.创建项目

首先利用脚手架构建Vue项目(如:vueMusic),通过NPM安装Axios插件。并在main.js中导入并初始化配置:Vue框架和Axios实战:音乐播放器项目-音乐列表_第1张图片

2.调整项目结构

调整项目结构,删除HelloWorld.vue组件及相关配置。components用于存放公共的组件页面,在src下新建pages文件夹用于存放页面组件。在App.vue中设置初始化样式,代码如下:
Vue框架和Axios实战:音乐播放器项目-音乐列表_第2张图片

3.创建MusicList页面

在components目录下建立公共组件MusicList.vue,用于存放歌曲列表,代码如下:Vue框架和Axios实战:音乐播放器项目-音乐列表_第3张图片
4.创建首页组件
在pages目录下新建首页组件index.vue,初始化并配置路由,代码如下:

Vue框架和Axios实战:音乐播放器项目-音乐列表_第4张图片
将MusicList.vue组件导入首页中,代码如下:

Vue框架和Axios实战:音乐播放器项目-音乐列表_第5张图片
页面显示效果如图

Vue框架和Axios实战:音乐播放器项目-音乐列表_第6张图片

你可能感兴趣的:(vue.js,前端,javascript)