vue3写个超级简单的音乐网站，保姆级教程

主要讲实现一个音乐播放器
前端vue3 ts pinia naive-ui
后端聊天 egg.js
线上地址http://101.33.238.130:7777
音乐接口相关项目文档https://binaryify.github.io/NeteaseCloudMusicApi
仓库地址https://gitee.com/dancing-zx/music-player
来来来，一起疯狂一起摆

1.首先创建vue3项目

关于pnpm
pnpm简单说就是高效的npm, 安装的依赖包不是跟随项目的
如在A项目install依赖A，在B项目也要A，就可以直接找到了，
具体可以搜一搜相关博客
npm i -g pnpm / pnpm i -g pnpm
pnpm i -g pnpm更新pnpm
若报警执行一遍 pnpm setup
创建项目
pnpm create vite your-projectName --template vue-ts
然后选择俺选的vue-ts
cd your-projectName
pnpm install
pnpm dev

2.引入路由

pnpm install vue-router@next --save
配置@指向src
vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import * as path from 'path'export default defineConfig({plugins: [vue()],resolve: {alias: {'@': path.resolve('./src')},},
})

src下创建router文件夹，下创建index.ts文件

import { createRouter, createWebHistory } from "vue-router";const routes = [{path: "/",name: "Index",component: () => import("@/pages/index.vue"), //自己建对应文件},
];export default createRouter({history: createWebHistory(),routes,
});

mian.ts使用

import { createApp } from 'vue'
import App from './App.vue'
import Router from './router/index'const app = createApp(App)app
.use(Router)
.mount('#app')

3.引入 naive-ui

跟着教程安装,naive-ui
本项目采用按需自动引入, 引入方式

4.引入axios

pnpm i axios
然后src创建request文件夹，创建axios.ts文件（根据个人喜好来）

axios.ts
import axios from 'axios';const http = axios.create({baseURL: 'http://127.0.0.1:3000', //采用的网易云api后端提供好了// headers:{'Content-Type':'multipart/form-data'}
})const get = (url:string, data={}) => {return new Promise((resolve, reject) => {http.get(url, data).then(res => {resolve(res)}).catch(err => {reject(err)})})
}const post = (url:string, data={}) => {return new Promise((resolve, reject) => {http.post(url, data).then(res => {resolve(res)}).catch(err => {reject(err)})})
}export {get, post};然后在mian.ts注册全局变量
app.config.globalProperties.$get = get
app.config.globalProperties.$post = post在vue组件使用方式
import { getCurrentInstance } from 'vue'const { appContext : { config: { globalProperties } } } = getCurrentInstance();
globalProperties.$post()

不过我一般会在src下创建一个api的文件夹，然后新建不同的ts/js文件放不同模块的接口
如本项目的获取歌词，搜索等
api/index(暂时功能少，就一个index)

import {get, post} from '@/request/axios';export function searchSong(data:any) {const { keyWord, limit, page } = dataconst url = `/cloudsearch?keywords=${keyWord}&limit=${limit}&offset=${page}`return get(url).then((res:any) => res.data.result).catch();
}export function getSong(data:any) {const { id } = dataconst url = `/song/url?id=${id}`return get(url).then((res:any) => res.data.data).catch();
}export function getLyric(data:any) {const { id } = dataconst url = `/lyric?id=${id}`return get(url).then((res:any) => res.data).catch();
}

5.引入pinia

pinia相当于vuex,打包体积小，具体可百度

pnpm i pinia
src下建store文件,结构
store
module
music.ts
index.ts

index.ts

import { createPinia } from 'pinia'
import piniaPersist from 'pinia-plugin-persist' //持久化缓存，默认sessionStorage, 可以打开f12应用查看 pnpm i pinia-plugin-persistconst store = createPinia()
store.use(piniaPersist);export default store

music.ts

import { defineStore } from 'pinia'export const useMusicStore = defineStore({id: 'music', // id必填，且需要唯一state: () => {return {selectList: [],currentMusic:{id: -1,songName: '',singerName: '',picUrl: '',},}},getters: {},actions: {addSelectList(value:Object) {this.selectList.push(value)},delSelectList(index:number) {this.selectList.splice(index, 1);},setCurrentMusic(value:any) {this.currentMusic = value}},// 开启数据缓存// persist: {//   enabled: true,// },
})

在组件使用

import { useMusicStore } from '@/store/modules/music'
const musicStore = useMusicStore()musicStore.selectList

6.eventBus引入

因为主要是学习vue3，所以度想接触一下
vue3因为没有this, 所以你懂的，想使用bus可以引入mitt

pnpm i mitt
src下创建util文件夹,在新建lib/bus.ts，当然，想取啥名字自己喜欢来
bus.ts

import mitt from 'mitt';
const bus = mitt()export default bus;

vue组件使用

import bus from '@/utils/lib/bus'
bus.emit('getLyric', dom) // 发送onMounted(()=>{bus.on('getLyric', handleLyric) //接受
})onUnmounted(()=>{bus.off('getLyric', handleLyric) //销毁
})

7.页面大体架构

丑是丑了点，还包括项目的页面。哈哈

说说为什么要引入eventBus
从上面的架构图可以看到，我想让，选择的歌曲列表，以及右侧聊天，下面的播放，不会随路由的变化而消失
所以这几个模块是同级的，我可以在router-view通过路由渲染不同的页面（vue spa）,例如我有一个点歌的路由select
一个展示当前歌曲信息（歌词）的路由list页面，如果我把歌单列表放在list，播放暂停上一首也放在list, 那我点歌的时候听不了吗？显然是不友好的，所以有了上面的架构
回归正题，我点歌了之后（router-view），需要通知下面的audio去播放，这时候就用到bus, audio播放后需要获取歌词呀，对吧。一开始想的是在list的mounted获取歌词，但实时播放呢，脑壳疼，所以我在下面的组件watch了route, 如果是list页面，通过bus把 audio传过去，需要监听audio的当前时间显示不同歌词

8.聊天

这块算是比较有难度的，因为这块自己的，之前写过单聊，是通过redis建立key value保存socketID可以发送到指定人，但群聊的没接触过，打算自己写个egg项目。至于为什么不在网易云的express项目扩展，别问，问就是技术不支持（不会）git地址：https://gitee.com/dancing-zx/music-chat.git

建立egg项目
创建egg环境
npm i egg-init -g / yarn add egg-init -g / pnpm add egg-init -g
新建项目
egg-init 项目名称 --type=simple
装依赖
pnpm install
启动 pnpm run dev

建了一个js的…
得了，反正也不太会ts

下插件
egg-cors 跨域
egg-socket.io 聊天
pnpm i egg-cors egg-socket.io
然后配置
config/plugin.js

module.exports = {cors: {enable: true,package: 'egg-cors',},io: {enable: true,package: 'egg-socket.io',},
};

config.default.js

config.cors = {origin: '*',allowMethods: 'GET,HEAD,PUT,POST,DELETE,PATCH,OPTIONS'};config.security = {csrf: {enable: false,},domainWhiteList: [ '*' ]};config.io = {namespace: {'/': {connectionMiddleware: [], //连接处理packetMiddleware: [], //包处理},},};

router.js

io.of('/').route('msg', io.controller.home.server);

home.js 消息的处理非常粗暴哈，直接广播给所有人，就几行代码实现全站聊天（大佬勿喷，只是想简单实现功能）

const { ctx } = this;const message = ctx.args[0]; // 前端发送过来的数据const { data } = message;// 广播const namespace = this.app.io.of('/');data.date = new Date().getTime();namespace.emit('msg', data);