网易云音乐客户端播放器（PC） Online Music Player

技术栈

@vue/cli 4.5.13
node v14.17.3
yarn v 1.22.11

>(*) Babel                                 ☜(转码器，可以将ES6代码转为ES5代码)
 ( ) TypeScript                            ☜( js的超集，强类型语言)
 ( ) Progressive Web App (PWA) Support     ☜(渐进式Web应用程序)
 ( ) Router                                ☜(vue-router（vue路由）)
 ( ) Vuex                                  ☜(vuex（vue的状态管理模式）)
 ( ) CSS Pre-processors                    ☜(CSS 预处理器（如：less、sass）)
 (*) Linter / Formatter                    ☜(代码风格检查和格式化（如：ESlint）)
 ( ) Unit Testing                          ☜(单元测试)
 ( ) E2E Testing                           ☜(集成测试)

• Vue CLI: Manually select features(Choose Vue version, Babel, TypeScript, Progressive Web App(PWA) Support, Router, Vuex, CSS Pre-processors, Linter / Formatter, Unit Testing, E2E Testing)
• Vue2.x, Use class-style component syntax
• Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)
• Use history mode for router
• Sass/SCSS(with dart-sass) 性能更好

> Sass/SCSS (with dart-sass)   ☜(保存后编译)
 Sass/SCSS (with node-sass)    ☜(实时编译)

• Pick a linter / formatter config: TSLint

> ESLint with error prevention only                 ☜(只进行报错提醒)
 ESLint + Airbnb config                             ☜(不严谨模式)
 ESLint + Standard config                           ☜(正常模式)
 ESLint + Prettier                                  ☜(严格模式)
 TSLint (deprecated)                                ☜(typescript格式验证工具)

>(*) Lint on save                                    ☜(保存就检测)
( ) Lint and fix on commit                          ☜(fix和commit时候检测)

• Pick a unit testing solution: Jest

? Pick a unit testing solution
>(*) Mocha + Chai           ☜(mocha灵活,只提供简单的测试结构，如果需要其他功能需要添加其他库/插件完成。必须在全局环境中安装)
( ) Jest                    ☜(安装配置简单，容易上手。内置Istanbul，可以查看到测试覆盖率，相较于Mocha:配置简洁、测试代码简洁、易于和babel集成、内置丰富的expect)

• Chrome

> In dedicated config files   ☜(独立文件放置)
 In package.json              ☜(放package.json里)

截图

"dependencies": {
  "core-js": "^3.6.5",
  "register-service-worker": "^1.7.1",
  "vue": "^2.6.11",
  "vue-class-component": "^7.2.3",
  "vue-property-decorator": "^9.1.2",
  "vue-router": "^3.2.0",
  "vuex": "^3.4.0"
},
"devDependencies": {
  "@types/jest": "^24.0.19",
  "@vue/cli-plugin-babel": "~4.5.0",
  "@vue/cli-plugin-e2e-cypress": "~4.5.0",
  "@vue/cli-plugin-pwa": "~4.5.0",
  "@vue/cli-plugin-router": "~4.5.0",
  "@vue/cli-plugin-typescript": "~4.5.0",
  "@vue/cli-plugin-unit-jest": "~4.5.0",
  "@vue/cli-plugin-vuex": "~4.5.0",
  "@vue/cli-service": "~4.5.0",
  "@vue/test-utils": "^1.0.3",
  "sass": "^1.26.5",
  "sass-loader": "^8.0.2",
  "typescript": "~4.1.5",
  "vue-template-compiler": "^2.6.11"
}

在现有的项目中安装插件

每个 CLI 插件都会包含一个 (用来创建文件的) 生成器和一个 (用来调整 webpack 核心配置和注入命令的) 运行时插件。

进度

• mv 页
• cd 页
• 搜索建议
• 搜索详情
• 播放（版权歌曲无法播放)
• 发现页
• 播放列表
• 播放记录
• 全部歌单
• 歌单详情
• 最新音乐
• 主题换肤功能
• 登录(网易云 uid 登录)

后端接口

https://neteasecloudmusicapi.vercel.app/#/

魔改

• Vue 全家桶 通过 Vue-CLI4 初始化生成。
• ElementUI 修改样式。
• Sass（CSS 预处理器）
• ESNext （JavaScript 语言的下一代标准）
• better-scroll 歌词滚动。
• CSS Variables 主题换肤。
• postcss-pxtorem 自动处理 rem。
• workbox-webpack-plugin 谷歌开发的利用 Service Worker 实现页面预缓存的插件。

Screenshots

安装与使用

yarn install
yarn serve

License