Skip to content

webVueBlog/vue-ts-netease-cloud-music

Repository files navigation

网易云音乐客户端播放器(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

About

网易云音乐客户端播放器(PC) Online Music Player

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 2

  •  
  •