网易云音乐Web版 Vue实现教程

网易云音乐Web版 Vue实现教程

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

本教程将引导您了解并运行基于Vue.js的网易云音乐Web克隆项目——vue-163-music，该项目已停止维护，但仍可供学习和参考。

1. 项目目录结构及介绍

该项目采用了清晰的目录结构来组织代码：

build: 包含Webpack构建相关的配置文件。config: 存放开发和生产环境的配置项，如端口号、proxy设置等。server app.js: 服务端主入口文件，用于启动Express服务器，并配置代理规则。newapi.js: 用于API转发的脚本，在开发环境中用以解决跨域问题。static: 部署时静态资源存放目录。 src assets: 静态资源（图片、字体等）。components: Vue组件库，包括各个页面和UI元素。deal: 解析来自网易云音乐API的JSON数据的特定逻辑。filters: Vue自定义过滤器。router: 路由配置，定义应用的导航路径。store: 使用Vuex进行状态管理的文件夹。App.vue: 应用的根组件。main.js: 应用的入口文件。 static: 静态资源文件夹，直接供浏览器访问的静态文件。.gitignore, babelrc, editorconfig, eslintignore, eslintrc.js, gitignore, LICENSE, package.json, README.md: 开发相关配置和元数据文件。

2. 项目的启动文件介绍

开发模式下的启动

主要依赖于npm run dev命令，它执行以下操作：

启动Webpack开发者服务器。自动处理JS和CSS文件，以及热更新(Hot Module Replacement)。使用server/newapi.js进行API请求的本地代理，解决跨域问题。

生产环境部署

使用npm run build打包应用，然后在服务端运行：

编译项目到dist目录，优化资源以适应生产环境。通过server/app.js启动Express服务器，指向编译后的静态资源，并配置必要的API代理。

3. 项目的配置文件介绍

config/index.js:

配置开发环境和生产环境的特性，如端口(port)，是否启用自动打开浏览器(autoOpenBrowser)，以及重要的是proxyTable，用于在开发期间处理API请求的代理设置。

server/app.js:

作为服务端的核心配置文件，它不仅设置了静态资源的服务路径，还配置了API请求的代理规则，保证生产环境下的跨域请求能够正常工作。

通过以上步骤和理解，您可以顺利地运行和探索这个模拟的网易云音乐Web应用，尽管项目已不再维护，但它依然是学习Vue.js、Vuex、Vue Router以及前后端分离开发的良好案例。

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