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

本文链接：https://blog.youkuaiyun.com/weixin_44905572/article/details/127108927

本文是一篇保姆级教程，详细介绍了如何利用vue3、typescript、pinia和naive-ui创建一个音乐播放器。教程涵盖了从创建vue3项目、设置路由、引入UI库和axios，到使用pinia管理和通信，以及实现聊天功能。同时，提供了在线演示地址和相关项目源码链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

主要讲实现一个音乐播放器
前端vue3 ts pinia naive-ui
后端聊天 egg.js
线上地址http://103.47.82.145:666
音乐接口相关项目文档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(