站长

<h1 id="heading-0">Vue3-Music-App</h1>
<p>基于Vue 3 + TypeScript + Vite + TSX + Pinia 开发的一个音乐播放器</p>
<ul>
<li>在线体验: <a href="https://blogweb.cn/link?target=http://119.3.214.158/music-app" target="_blank" rel="nofollow noopener noreferrer">http://119.3.214.158/music-app</a></li>
</ul>
<p><img src="https://img.blogweb.cn/article/1d4e4573cf36457dba03dab388183bbe.webp" loading="lazy" alt="基于Vue 3 + TypeScript + Vite + TSX + Pinia 开发的一个音乐播放器"></p>
<p>项目整体使用的技术栈较新，而且使用了TSX替代了传统的SFC，用Pinia替代了Vuex.</p>
<p>另外，👏🏻欢迎大家来star⭐️ 项目地址 <a href="https://github.com/dingsheng1214/vue3-music-app" target="_blank">github.com/dingsheng12…</a></p>
<h2 id="heading-1">本地安装</h2>
<pre class="language-sh line-numbers"><code><span># 安装依赖</span>
pnpm install
<span># 启动后端接口转发服务器</span>
node backend/prod.server.js
<span># 启动前端</span>
pnpm dev
</code></pre>
<h2 id="heading-2">UI</h2>
<h3 id="heading-3">推荐页面</h3>
<p><img src="https://img.blogweb.cn/article/2c624a7b7b734f0f9fcaeadb23e0b5ad.webp" loading="lazy" alt="基于Vue 3 + TypeScript + Vite + TSX + Pinia 开发的一个音乐播放器"></p>
<h3 id="heading-4">歌手页面</h3>
<p><img src="https://img.blogweb.cn/article/06f4f77388674e3bbbfad1a135bffdab.webp" loading="lazy" alt="基于Vue 3 + TypeScript + Vite + TSX + Pinia 开发的一个音乐播放器"></p>
<h3 id="heading-5">全屏播放</h3>
<p><img src="https://img.blogweb.cn/article/d556c5481d5e4388925a9586f5a29678.webp" loading="lazy" alt="基于Vue 3 + TypeScript + Vite + TSX + Pinia 开发的一个音乐播放器"></p>

Vue3-Music-App基于Vue3+TypeScript+Vite+TSX+Pinia开发的一个音乐播放器项目整体使用的技术栈较新，而且使用了TSX替代了传统的SFC，用Pinia替代了Vuex.另外，👏🏻欢迎大家来star⭐️项目地址本地安装UI推荐页面歌手页面全屏播放