Vue + Element + animate.css 音乐网站（网易云版）

Vue + Element + animate.css 音乐网站

一、前言

这是小弟的毕业设计，也是第一次用vue框架独立开发网站，现在接入了网易云api，到后面我还会做对应的后端和管理端。因为是第一次开发网站和第一次写博客，所以肯定有不好的地方或者有代码垃圾的地方，希望各位大佬轻喷或者指出，谢谢大家。这里对音乐网站这个项目的开发流程做一下描述，具体每个组件的功能实现逻辑我会在随后一些日子更新文章来细说一下。因为是第一次开发没有任何经验所以我觉得了解具体实现的来龙去脉，上手自己做就容易得多了，同时也和各位跟我一样刚入门vue或者准备入门vue的同道中人说一下自己踩过的一些坑，希望能大家分享一下

这是网站的地址 http://music1234.gitee.io/abc
完整项目代码下载：https://download.csdn.net/download/x1140711243/13964941

以下是部分功能预览图。

首页

mv播放页

歌手信息页

专辑、歌单页

歌词页

首页的推荐MV区

歌曲评论页

二、开发环境和资源

操作系统：win10

vue全家桶：vue: 2.5.2, vue-lazyload: 1.3.3, vue-router: 3.0.1, axios: 0.21.0, vuex: 3.5.1,

webpack: 3.6.0

animate.css: 4.1.1

node：v12.18.3

IDE：VS code 2018

组件：UI组件：Element-UI、Muse-UI

动画：animate.css、 wow.js(最终并没有用到，可以在项目中删除)

网站图标资源：阿里巴巴矢量图标库

音乐资源：网易云API

               http://www.hjmin.com  和  http://musicapi.leanapp.cn（支持https访问）

三、项目构建

1、创建项目

直接用官方提供的脚手架，运行如下命令先全局安装 vue，然后进行安装

npm install -g @vue/cli

# 进入要创建项目的地方
vue init webpack client

进入项目，执行如下命令安装项目依赖，

npm install

然后直接如下命令项目就跑起来了。

npm run dev

但是假如你像我一样是新手，不建议上来就用脚手架，先看一下官网了解一下组件、路由等等，然后用html引入vue.js写一个简单的页面再用脚手架。

2、开发思路

创建一个vue项目后，因为代码都放在一起对后期维护和修改都不方便，所以把他们根据功能或者位置拆分开，放到 components 文件夹下面去实现，加载到 App.vue 文件中，最后渲染到页面中。

最开始构建页面可以写死，当基本样子搭起来之后就可以去向后端去请求数据，请求数据用到的是axios插件，获取到数据后console一下，在控制台查看请求的数据，确保数据保存到正确的变量中去

组件的问题解决了接下来就是访问的问题，我们如何通过点击的时候切换组件呢？我们在 router 文件夹中引入组件，给它们设定访问它们的路径。这里用到了vue-router插件。

随着组件的增多，组件之间的传值就是问题，不可能一些数据一直好几个组件里一直传，我们需要把它们单独拿出来放到 store 文件夹下面保存起来，当需要的时候在获取（如果想让页面刷新数据不丢失可以通过 sessionStorage 解决vuex刷新数据丢失问题）。这里用到了vuex组件。

网站开发过程中最磨人的就是样式设计问题，所以这里我引用Element-UI 和 Muse-UI解决设计问题。

为了使网站不那么呆板，所以加入一些动画让网站变得生动一点，当然了加入动画以后网站会更吃性能。这里用到了animate.css

vue支持很多的第三方组件，能给我们项目带来很好的交互和显示效果，具体在需要的时候npm或yarn就行了，当然了，一些样式和js语句也可以放到assets文件夹下。


静态文件夹：顾名思义，用来存放一些静态文件，如图片，css样式，js文件等等

组件文件夹：用来存放你所定义的各种组件，里面都是.vue文件，是你自己设计好的每一个组件。

vue-roter文件夹：用来存放通过路由打开的组件，具体可以查看官网

vuex文件夹：因为vue项目中每个组件传数据很麻烦，所以官方就做了个vuex来方便各个组件进行数据传送，它就像是一个仓库，组件可以从里面获取别的组件放进的数据，但记住修改vuex里面的值只能通过vuex里的mutations进行修改，还有就是有些博客写store文件夹里的js文件命名用store.js， 但是这样会报错的，正确命名应该是index.js.官网

app.vue ：网站的入口文件，相当于普通html项目的index.html，你也可以改，只不过需要在main.js哪里更改应用。说白了就是一个普通vue文件，只不过命名为app.vue，你也可以在里面写代码.

main.js：也是项目的入口文件，项目中所有的页面都会加载main.js,所以main.js,主要有三个作用：
1.实例化Vue。
2.放置项目中经常会用到的插件和CSS样式。例如： 网络请求插件:axios和vue-resource、图片懒加载插件：vue-lazyload等全局插件。
3.存储全局变量。例如（用于的基本信息）
说白了就是这个文件就是大哥，所有组件都会加载这个文件并且获取里面的数据

3、最终本项目结构

.
├── build // webpack相关配置文件
├── config // vue基本配置文件
├── node_modules // 包
├── index.html // 入口页面（build以后在dist文件夹有这个文件）
├── package.json // 管理包的依赖
├── src // 项目源码目录
│   ├── assets  // 静态资源，图片、js、css 等
│   ├── router // 路由
│   ├── myjs //我自己的定义的js组件，但是最终网站没有用到，可以删除
│   ├── store // 管理数据
│   ├── components
│   │   ├── album.vue // 展示歌单专辑歌曲和信息
│   │   ├── discovery.vue // 网站首页，用来推荐歌单、歌曲、MV、歌手
│   │   ├── like.vue // 我的音乐区，个人收藏的歌曲专辑等
│   │   ├── list.vue // 网站那四个导航按钮
│   │   ├── mvs.vue // MV区
│   │   ├── player.vue // 音乐播放器
│   │   ├── playlists.vue // 专辑、歌单区
│   │   ├── result.vue // 搜索结果区
│   │   ├── show.vue // 轮播图区
│   │   ├── songer.vue // 展示歌手信息和歌手热门歌曲
│   │   ├── songs.vue // 歌手区
│   │   ├── top.vue // 网站头部的区域，包括搜索和网站名字、登陆注册
│   │   └── video.vue // 播放mv和mv评论区
│   ├── main.js // 入口js文件
│   └── App.vue // 根组件
├── static // 存放静态资源 
├── .babelrc // bable 编译配置
└── .gitignore // 提交忽略的文件配置（用于上传GitHub或者部署到服务器）

四、网站功能

1、播放歌曲
2、播放mv
3、推荐歌曲
4、推荐歌手
5、推荐mv
6、推荐专辑、歌单
7、登陆注册（未完成）
8、收藏歌曲、歌单、歌手（未完成）
9、发布评论（未完成）
10、查看评论
11、搜索
12、歌词显示
13、播放列表
14、切换播放进度
15、切换播放模式
16、上、下一首歌
17、查看歌手信息
18、查看专辑、歌单信息

五、结语

这是我第一次用vue开发，所以肯定有各种的不足与代码垃圾。这里说一下部署到服务器的一个前后端的问题：
前端部署到服务器以后，前端地址如果是HTTPS://…的后端地址也要HTTPS://… （http的话前后端也要相同）不然浏览器就会报 This request has been blocked; the content must be served over HTTPS.
还有就是空白页问题，这个肯定是样式和资源获取地址不正确的问题，可以参考这里
还有一些跨域的问题，Axios是有跨域这个功能的（也可以使用代理），但是有些时候也要看后端是怎么样解决的，具体项目具体分析，

大家下载这个项目的时候最好下载百度云的，因为上传到gitee上的并没有插件，百度云的是完整的项目包含了所有的文件打开就可以使用了，还有就是我搭建好的网站是有背景虚化的功能的，但是大家下载的项目中我注释掉了这个功能，因为这个东西兼容并不是很好，而且动画加背景虚化网站更加卡到飞天，如果有需要加上backdrop-filter: blur(10px);（背景虚化）就好了，当然还有filter（内容虚化），自己选择。

最后，这个网站功能并没有完成做完，未完成的功能和每个组件的具体逻辑和实现思路我会在往后的日子更新帖子来说明，谢谢大家。