时间：2023-04-23 21:45:02 | 来源：网站运营
时间：2023-04-23 21:45:02 来源：网站运营
【个人练习】网易云音乐PC端仿站 Vue 2（一）：
在线咨询
vue create netease-music2.配置vue.config.js文件const { defineConfig } = require('@vue/cli-service')module.exports = defineConfig({ transpileDependencies: true, devServer: { open: true, // 运行项目时自动打开页面 host: 'localhost', // 设置打开地址为localhost:8080 }})3. 运行项目npm run serve4. 网易云音乐API安装及运行git clone git@github.com:Binaryify/NeteaseCloudMusicApi.gitcd NeteaseCloudMusicApinpm install运行：node app.js出现 server running @ http://localhost:3000 即可。| 路径 | 组件（功能） | 嵌套级别 |
|---|---|---|
| /home | 发现音乐（首页） | 1级 |
| /home/discover | 首页-推荐 | 2级 |
| /home/toplist/:id | 首页-排行榜 | 2级 |
| /home/playlist | 首页-歌单 | 2级 |
| /home/djradio | 首页-主播电台 | 2级 |
| /home/artist | 首页-歌手 | 2级 |
| /home/album | 首页-新碟上架 | 2级 |
| /my | 我的音乐 | 1级 |
| /my/artist | 我的音乐-我的歌手 | 2级 |
| /my/mv | 我的音乐-我的视频 | 2级 |
| /my/radio | 我的音乐-我的电台 | 2级 |
| /my/playlist/:id | 我的音乐-创建/收藏的歌单 | 2级 |
| /friend | 关注 | 1级 |
| /album/:id | 专辑页面 | 1级 |
| /playlist/:id | 歌单页面 | 1级 |
| /artist/:id | 歌手页面 | 1级 |
| /artist/song | 歌手-热门作品 | 2级 |
| /artist/album | 歌手-所有专辑 | 2级 |
| /artist/mv | 歌手-相关MV | 2级 |
| /artist/desc | 歌手-艺人介绍 | 2级 |
| /song/:id | 歌曲页面 | 1级 |
scrollBehavior，使得路由切换时，页面滚动条返回顶部。import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)// 路由配置const routes = [ { path: '/', redirect: '/home/discover' }, // "发现音乐"页面（首页） { path: '/home', component: () => import('@/views/Home'), children: [ { path: 'discover', component: () => import('@/views/Home/Discover') }, { path: 'toplist/:id?', component: () => import('@/views/Home/TopList') }, { path: 'playlist', component: () => import('@/views/Home/PlayList') }, { path: 'djradio', component: () => import('@/views/Home/DjRadio') }, { path: 'artist', component: () => import('@/views/Home/Artist') }, { path: 'album', component: () => import('@/views/Home/Album') }, ] }, // "我的音乐"页面 { path: '/my', component: () => import('@/views/My'), redirect: '/my/playlist', children: [ { path: 'artist', component: () => import('@/views/My/Logged/Artist') }, { path: 'mv', component: () => import('@/views/My/Logged/Mv') }, { path: 'radio', component: () => import('@/views/My/Logged/DjRadio') }, { path: 'playlist/:id?', component: () => import('@/views/My/Logged/PlayList') }, ] }, // "关注"页面 { path: '/friend', component: () => import('@/views/Friend') }, // 专辑页面 { path: '/album/:id?', component: () => import('@/views/Album')}, // 歌单页面 { path: '/playlist/:id?', component: () => import('@/views/PlayList')}, // 歌手页面 { path: '/artist', component: () => import('@/views/Artist'), redirect: '/artist/song', children: [ { path: 'song', component: () => import('@/views/Artist/MainLeft/Song.vue') }, { path: 'album', component: () => import('@/views/Artist/MainLeft/Album.vue') }, { path: 'mv', component: () => import('@/views/Artist/MainLeft/Mv.vue') }, { path: 'desc', component: () => import('@/views/Artist/MainLeft/Desc.vue') }, ] }, // 歌曲页面 { path: '/song/:id?', component: () => import('@/views/Song') },]const router = new VueRouter({ routes, // 切换路由时，将滚动条复位到最顶部和最左侧 scrollBehavior(to, from, savedPosition) { // savedPosition当且仅当通过浏览器的前进/后退按钮触发时才可用 if (savedPosition) { return savedPosition } else { return { x: 0, y: 0 } } }})export default routeraxios封装请求工具，调用接口时使用。axios实例axios实例发送请求，返回Promise import axios from 'axios'const instance = axios.create({ baseURL: 'http://localhost:3000', timeout: 5000,})// 请求拦截器instance.interceptors.request.use((config) => { let cookie = localStorage.getItem('COOKIE') if (config.method.toLowerCase() === 'get') { if (!config.params) config.params = {} config.params.timerstamp = Date.parse(new Date()) if (cookie && cookie !== '' && !config.params.cookie) { config.params.cookie = cookie } } else { if (!config.data) config.data = {} config.data.timerstamp = Date.parse(new Date()) if (cookie && cookie !== '' && !config.data.cookie) { config.data.cookie = cookie } } return config;}, (error) => { return Promise.reject(error);})// 响应拦截器instance.interceptors.response.use((response) => { return response.data;}, (error) => { return Promise.reject(error);})export default (url, method, submitData) => { return instance({ url, method, [method.toLowerCase() === 'get' ? 'params' : 'data']: submitData })}关键词：音乐,练习
