网易云音乐Demo项目教程

网易云音乐Demo项目教程

Netease-music-demo「网易云音乐」Demo。使用了 Vue2.0 全家桶来开发的。项目地址:https://gitcode.com/gh_mirrors/ne/Netease-music-demo

1. 项目的目录结构及介绍

├── index.html
├── package-lock.json
├── package.json
├── src
│   ├── App.vue
│   ├── assets // 静态资源，图片
│   │   ├── image
│   │   └── logo.png
│   ├── common
│   │   └── lang // 国际化文件包
│   ├── components // 公共组件
│   │   ├── Carousel.vue
│   │   ├── footerComponent.vue
│   │   ├── headerComponent.vue
│   │   └── navComponent.vue
│   ├── config
│   │   ├── env.js // 开发API路径（项目环境）
│   │   └── fetch.js // 封装的异步请求
│   ├── data
│   │   └── detail.json
│   ├── main.js
│   ├── router
│   │   └── index.js
│   ├── service // 项目中全部的异步接口请求文件
│   │   └── dataProcessing.js
│   ├── store
│   │   ├── actions.js
│   │   ├── index.js
│   │   ├── mutations.js
│   │   └── store.js
│   └── view
│       ├── downLoadComponent.vue
│       ├── findMusicPage
│       ├── friendComponent.vue
│       ├── musicManComponent.vue
│       └── myMusicComponent.vue
├── static
│   ├── css
│   │   └── common.css
│   └── js
│       └── util.js
└── test

目录结构介绍

• index.html: 项目的入口HTML文件。
• package-lock.json 和 package.json: 项目的依赖管理文件。
• src: 源代码目录。
  • App.vue: 主组件。
  • assets: 静态资源目录，包含图片等。
  • common: 公共文件目录，如国际化文件。
  • components: 公共组件目录。
  • config: 配置文件目录，包含环境配置和异步请求封装。
  • data: 数据文件目录。
  • main.js: 项目的主入口文件。
  • router: 路由配置目录。
  • service: 异步接口请求文件目录。
  • store: Vuex状态管理目录。
  • view: 视图组件目录。
• static: 静态文件目录，包含CSS和JS文件。
• test: 测试文件目录。

2. 项目的启动文件介绍

main.js

main.js 是项目的启动文件，负责初始化Vue实例并挂载到DOM中。以下是 main.js 的主要内容：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

主要功能

• 导入Vue库和项目的主要组件 App.vue。
• 导入路由配置 router 和状态管理 store。
• 创建Vue实例并挂载到DOM元素 #app 上。

3. 项目的配置文件介绍

config/env.js

env.js 文件用于配置项目的API路径和其他环境相关的设置。以下是一个示例：

export default {
  apiUrl: 'http://example.com/api'
}

config/fetch.js

fetch.js 文件封装了异步请求的逻辑，提供了统一的接口调用方式。以下是一个示例：

import axios from 'axios'
import env from './env'

const fetch = axios.create({
  baseURL: env.apiUrl,
  timeout: 5000
})

export default fetch

主要功能

• 导入 axios 库和环境配置 env.js。
• 创建一个 axios 实例，配置基础URL和超时时间。
• 导出封装好的 fetch 对象，供项目中其他模块调

Netease-music-demo「网易云音乐」Demo。使用了 Vue2.0 全家桶来开发的。项目地址:https://gitcode.com/gh_mirrors/ne/Netease-music-demo