Vue-163-Music 项目教程

Vue-163-Music 项目教程

vue-163-music 【停止维护】网易云音乐web版，支持PC端常用功能，localStorage保存播放列表 项目地址: https://gitcode.com/gh_mirrors/vu/vue-163-music

1. 项目介绍

Vue-163-Music 是一个基于 Vue.js 的开源项目，旨在仿写网易云音乐的 Web 版客户端。该项目支持 PC 端的常用功能，并使用 localStorage 保存播放列表。尽管项目已经停止维护，但它仍然是一个很好的学习资源，特别是对于那些希望深入了解 Vue.js 及其生态系统的开发者。

主要功能

• 发现音乐
• 个性推荐
• 播放音乐（包括上一曲、播放、暂停、下一曲、进度控制、音量控制）
• 音乐搜索
• 播放列表管理（包括切歌、删歌、清空播放列表）
• 本地缓存播放列表

技术栈

• Vue.js
• Vuex
• Vue-Router
• Vue-Resource
• Express
• http-proxy-middleware
• animate.css
• vue-slider-component

2. 项目快速启动

克隆项目

首先，克隆项目到本地：

git clone https://github.com/ShanaMaid/vue-163-music.git
cd vue-163-music

安装依赖

使用 npm 安装项目依赖：

npm install

启动 API 转发

在开发环境中，需要启动 API 转发服务：

node server/newapi.js

启动开发服务器

启动开发服务器，访问 http://localhost:8080/：

npm run dev

打包项目

打包项目以用于生产环境：

npm run build

启动生产服务器

在生产环境中，启动服务器并访问 http://localhost:3000/：

cd server
node app.js

3. 应用案例和最佳实践

应用案例

Vue-163-Music 可以作为一个学习 Vue.js 的实践项目，特别是对于那些希望了解如何构建复杂的单页应用（SPA）的开发者。通过研究该项目，开发者可以学习到如何使用 Vuex 进行状态管理，如何使用 Vue-Router 进行路由管理，以及如何与后端 API 进行交互。

最佳实践

• 组件化开发：项目中的组件化开发方式是一个很好的实践，开发者可以学习如何将复杂的 UI 拆分为多个可复用的组件。
• 状态管理：使用 Vuex 进行状态管理，确保应用的状态在多个组件之间共享和同步。
• API 代理：使用 http-proxy-middleware 进行 API 代理，解决开发环境中的跨域问题。

4. 典型生态项目

Vue.js 生态系统

• Vue CLI：Vue.js 的官方脚手架工具，用于快速搭建 Vue.js 项目。
• Vuex：Vue.js 的状态管理库，用于管理应用的状态。
• Vue-Router：Vue.js 的路由管理库，用于管理应用的路由。
• Vue-Resource：Vue.js 的 HTTP 客户端库，用于与后端 API 进行交互。

相关项目

• Vue-Music：另一个基于 Vue.js 的音乐播放器项目，提供了更多的功能和更好的用户体验。
• Vue-Admin：一个基于 Vue.js 的后台管理系统模板，适合用于构建企业级应用。

通过学习 Vue-163-Music 项目，开发者可以更好地理解 Vue.js 及其生态系统，并将其应用于实际项目中。

vue-163-music 【停止维护】网易云音乐web版，支持PC端常用功能，localStorage保存播放列表 项目地址: https://gitcode.com/gh_mirrors/vu/vue-163-music