1，前言

项目基于Vue2全家桶及网易云音乐 Node Api实现，网站风格简约清新，体验比较流畅。

下载地址：https://github.com/pdd11997110103/web-Music

2，已有功能

  • 网易云APP扫码登录 & 网易云账号登录
  • 注册
  • 音乐播放器
  • 歌单 & 详情
  • 歌手 & 详情
  • MV & mv详情
  • 排行榜
  • 搜索
  • 评论
  • 歌词

3，使用

  • Clone该项目：https://github.com/pdd11997110103/web-Music.git
  • 安装：npm install
  • 运行：npm run serve
  • 测试环境打包：npm run test
  • 正式环境打包：npm run build
  • 同时打包正式环境 & 测试环境：npm run all
  • 修复：npm run lint

4，目录结构

│  .env.development

│  .env.production

│  .env.test => .env环境文件

│  .eslintignore => eslint忽略配置

│  .eslintrc.js => eslint配置

│  .gitignore => git忽略配置

│  babel.config.js

│  package-lock.json

│  package.json

│  README.md => 说明文件

│  vue.config.js => 脚手架配置

├─node_modules => 依赖

├─public

└─src

    │  App.vue => 根容器

    │  main.js => 根文件

    │

    ├─assets

    │  ├─css => 公共样式

    │  │      base.css => 基础样式

    │  │      globalColor.less => 全局颜色

    │  │      init.css => 初始化

    │  ├─icon => 字体图标

    │  │

    │  └─image => 图片

    │      │

    │      └─info

    │

    ├─components => 公共组件

    │

    ├─mixins

    │      path.js => 常用方法

    │

    ├─plugins

    │      elementUI.js => 局部引入elementUi

    │      snowflake.js => 雪花插件

    │

    ├─request

    │  │  fetch.js => axios封装

    │  └─api => 接口定义

    ├─store => vueX

    ├─utils => 工具类

    └─views => 页面

5，页面效果

登录页

首页

排行榜

歌单列表

歌单详情

歌手列表

歌手详情

MV列表

MV详情

搜索页

播放器

如果看了觉得有帮助的，我是@鹏多多，欢迎 点赞 关注 评论；END

PS：在本页按F12，在console中输入document.querySelectorAll('.diggit')[0].click()，有惊喜哦

公众号

往期文章

个人主页

Vue2全家桶+Element搭建的PC端在线音乐网站的更多相关文章

  1. Vue + TypeScript + Element 搭建简洁时尚的博客网站及踩坑记

    前言 本文讲解如何在 Vue 项目中使用 TypeScript 来搭建并开发项目,并在此过程中踩过的坑 . TypeScript 具有类型系统,且是 JavaScript 的超集,TypeScript ...

  2. Vue2全家桶之一：vue-cli（vue脚手架）超详细教程

    本文转载于:https://www.jianshu.com/p/32beaca25c0d   都说Vue2简单上手容易,的确,看了官方文档确实觉得上手很快,除了ES6语法和webpack的配置让你感到 ...

  3. Vue2 全家桶仿 微信App 项目，支持多人在线聊天和机器人聊天

    前言 这个项目是利用工作之余写的一个模仿微信app的单页面应用,整个项目包含27个页面,涉及实时群聊,机器人聊天,同学录,朋友圈等等,后续页面还是开发中.写这个项目主要目的是练习和熟悉vue和vuex ...

  4. Vue2全家桶之二：vue-router（路由）详细教程，看这个就够了

     作者:东西里本文转载于:https://www.jianshu.com/p/514c7588e877来源:简书 转载仅供自己日后看方便.  由于Vue在开发时对路由支持的不足,于是官方补充了vue- ...

  5. 【前端】Vue2全家桶案例《看漫画》之番外篇、express上传漫画（可选）

    转载请注明出处:http://www.cnblogs.com/shamoyuu/p/vue_vux_app_extra_1.html 项目github地址:https://github.com/sha ...

  6. vue全家桶项目搭建（vue-cli 2.9.6+vue-router+vuex+axios）

    一.安装vue-cli + vue-router + vuex + axios 1.安装vue-cli 2.创建项目 3.安装vuex和axios 二.搭建项目目录结构,如下所示: 1.assets目 ...

  7. 【前端】Vue2全家桶案例《看漫画》之七、webpack插件开发——自动替换服务器API-URL

    转载请注明出处:http://www.cnblogs.com/shamoyuu/p/vue_vux_app_7.html 项目github地址:https://github.com/shamoyuu/ ...

  8. 【前端】Vue2全家桶案例《看漫画》之六、图片阅读页

    转载请注明出处:http://www.cnblogs.com/shamoyuu/p/vue_vux_app_6.html 项目github地址:https://github.com/shamoyuu/ ...

  9. 【前端】Vue2全家桶案例《看漫画》之五、引入axios

    转载请注明出处:http://www.cnblogs.com/shamoyuu/p/vue_vux_app_5.html 项目github地址:https://github.com/shamoyuu/ ...

随机推荐

  1. 攻防世界Web之fakebook

    打开题目,得到一个网页,包含一个表格.两个按钮. 习惯性先查看网页源码,但没发现有效信息. <!doctype html> <html lang="ko"> ...

  2. shell脚本 PHP+swoole的安装

    #!bin/bash set -e # Check if user is root if [ $(id -u) != "0" ]; then echo "Error: p ...

  3. 【java+selenium3】自动化cookie操作+图形验证码处理 (十五)

    一.cookie操作 1.获取浏览器所有的cookie import java.util.Set; import org.openqa.selenium.Cookie; //获取浏览器所有的cooki ...

  4. 【java+selenium3】多窗口window切换及句柄handle获取(四)

    一 .页面准备 1.html <html> <head> <title>主页面 1</title> </head> <body> ...

  5. LeetCode -90. 子集 II C++ （回溯法）

    class Solution { public: vector<vector<int>> subsetsWithDup(vector<int>& nums) ...

  6. 如何解决Redis缓存雪崩、缓存穿透

    缓存雪崩 数据未加载到缓存中,或者缓存同一时间大面积的失效,从而导致所有请求都去查数据库,导致数据库CPU和内存负载过高,甚至宕机. 比如一个雪崩的简单过程: 1.redis集群大面积故障 2.缓存失 ...

  7. [hdu5629]Clarke and tree

    首先由一个神奇的序列叫做Purfer序列,他可以表示一棵树,且每个节点出现此时为度数-1(因此总长为n-2). 然后dp,用f[i][j][k]表示用前i个点中的j个点构成了一个长度为k的Purfer ...

  8. [bzoj1101]Zap

    1 #include<bits/stdc++.h> 2 using namespace std; 3 #define N 50001 4 int t,n,m,k,ans,mu[N],vis ...

  9. [cf1103E]Radix sum

    类似于uoj272,即$B=10$的情况,然后有以下几个细节问题: 1.答案对$2^{58}$取模可以先使用自然溢出模$2^{64}$,最后对$2^{58}$取模即可 2.为了避免实数,令$\omeg ...

  10. [atAGC022D]Shopping

    称0到$L$的方向为左,同时为了方便,可以假设$0<t_{i}\le 2L$ 当我们确定是进入店中的方向,根据这个店的位置以及购物时间,不难确定出来时火车经过0或$L$的次数,由于$0<t ...