Vue3+Vite+TS独立开发仿网易云音乐Web应用

最新推荐文章于 2024-05-07 14:19:59 发布
最新推荐文章于 2024-05-07 14:19:59 发布
阅读量2.1k 收藏 13
点赞数 1
文章标签： 前端 javascript typescript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/laplacepoisson/article/details/125890725
版权

项目背景

自己之前的项目要么就是比较小的，要么就是跟着视频敲的，感觉做完之后并没有很好地吸收学到的知识。于是想要自己独立地做一个前端项目，刚好看到网易云音乐的网页端没有它的客户端好看，于是就仿照网易云音乐的客户端做了一个Web端的应用。

这个项目还有很多页面和功能没有实现，但一些基础功能都已经实现了。整个项目从技术选型，路由设计，再到代码规范，代码开发，自动构建部署的一系列流程都是自己独立完成的，期间不断踩坑，但也学习到不少的东西。

这个项目也是我第一次使用TypeScript进行开发，我只是简单地了解了一下TS的基础语法就开始写了，所以很多时候把TypeScript写成了"AnyScript"🤣，后续再慢慢完善吧。

另外笔者是非科班出身，自学前端也不过半年，很多诸如设计模式等内容也还没学习，所以代码难免写成屎山，后续也会不断完善。

大家有什么疑问或建议的话可以在评论区留言呀！虚心接受大家的建议。

最后贴出Github的项目地址，欢迎大家pr和提issue，如果可以给个start鼓励一下我就更好啦！😉

项目技术栈

  • Vue3
  • Vue-Router
  • Pinia
  • Unocss
  • Less
  • TypeScript
  • Vite
  • VueUse
  • Unplugin-auto-import
  • pnpm

目前实现的功能

  • 个性推荐页面✅
  • 歌单详情页✅
  • 歌手详情页✅
  • 排行榜✅
  • 播放器✅
  • 歌曲详情页✅
  • 歌词滚动✅
  • 歌词与播放器联动✅
  • 上一曲下一曲✅
  • 离线播放✅
  • 扫码登录✅
  • 音量调整✅
  • 自动构建和部署✅

待实现的功能

  • 随机播放顺序播放
  • 播放列表
  • 手机号密码登录
  • 邮箱登录
  • 歌手详情页
  • MV播放
  • 音乐聊天室
  • …

实际效果图展示

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

前端corner
关注
  • 1
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
vue3+vite+TS+taiwindcss 音乐网站music163.zip
04-15
音乐商城是一个在线平台，用于销售音乐作品，包括数字音乐、CD、唱片、演唱会门票等。以下是音乐商城的一般分析： 产品和服务、浏览和搜索功能、用户个性化推荐、购买流程、用户账户管理、促销和营销、客户服务 【引流】 编程语言和开发技术：如Java、$C++、Python、JavaScript、Ruby等。 数据库技术：如关系型数据库（如MySQL、Oracle、SQL Server）和非关系型数据库（如MongoDB、Redis）等。 前端开发：HTML、CSS、JavaScript等用于构建网页和Web应用程序的技术。 后端开发：涉及服务器端编程、API开发、数据库集成等技术。 移动应用开发：包括iOS开发（使用Swift或Objective-C）和Android开发（使用Java或Kotlin）等。 大数据技术：包括Hadoop、Spark、Hive等用于处理和分析大规模数据集的技术。
Vue+Vite+TS
weixin_44374471的博客
11-14 3966
【代码】Vue+Vite+TS。
目前主流框架——vite+vue+ts
最新发布
qq_57320832的博客
05-07 1602
这种架构的优势很明显，就是体量小，结构清晰等，但也有一些缺点，例如有些轮子无法使用，组件化、模块化开发非常不便影响开发效率等。与其他大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 3.0 版本全面支持 TypeScript 语法，对生命周期钩子进行了优化和剔除，加上工具 setup 的语法糖，以及 vue 单页面多个根元素的扩展，使得代码更加精简和有条理。Vite + Vue + TypeScript 是一种前端框架组合，它们各自具有独特的特点和优势，结合起来能够提供强大的前端开发能力。
一篇文章教小白学会搭建 vite + ts + vue3 项目，手把手教程，不会算我输（第一篇）
qq_17335549的博客
12-29 2万+
【前端工程化实践】手把手教小白搭建 vite + ts + vue3 项目
vue+ts+vite详细入门及实践
Hei, Welcome To vickie's Blog，Good Good Study, Day Day Up ~
08-11 1万+
vue+ts+vite搭建前端项目
vite+vue3+ts项目构建详细步骤（配置多语言版本）
失眠时间的博客
05-15 1万+
由于之前几乎都是使用Webpack 构建项目，偶尔使用了gulp。最近两年才开始使用Vue3开发项目，所以特意记录下Vite构建期间的使用方式。后续也会花时间写下webpack构建项目的文章，期待后期的更新～
2023 最新最细 vite+vue3+ts 多页面项目架构，建议收藏备用！
坚信万物皆可切的切图仔
04-18 1万+
在搭建的过程中，一定要注意因为修改了项目根目录（root）所带来的问题，利用将路径重置到相对于项目根的位置！关于如何使用这个多页面脚手架，可以看 README.md 文件。github地址。
vue3+vite+ts 仿淘宝放大镜效果
09-17
在本项目中，我们主要探讨的是如何利用Vue3、Vite和TypeScript来实现一个类似于淘宝网站中的商品图片放大镜效果。这个效果通常用于增强用户的购物体验，让他们能更清晰地查看商品细节。以下是实现这一功能所涉及的...
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化
05-12
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+...
vue3+vite2+ts+vant3 项目demo
04-16
此项目 按照大佬文章 一步步学习搭建 https://juejin.cn/post/7036745610954801166?share_token=5dd94aae-bed2-4733-93ac-306118376443；感谢大佬
Vue3+Vite4+TS 后台模板
06-08
Vue3+Vite4+TS 后台模板是一款基于最新技术栈构建的高效、现代化的前端开发框架，专为后台管理界面设计。该模板利用了Vue.js的最新版本Vue3，搭配快速构建工具Vite4，以及TypeScript的静态类型检查，提供了强大的...
vue3+ts+vite+router+vuex+api请求封装
12-29
Vue3+TS+Vite+Router+Vuex+API请求封装是现代前端开发中的一个典型组合，用于构建高效、可维护的后台管理系统。这个脚手架提供了完整的开发环境配置和基础架构，使得开发者能够快速搭建后台应用。下面将详细介绍这个...
vite+vue3+ts 手把手教你创建一个vue3项目
热门推荐
weixin_59916662的博客
10-17 6万+
基本全程cv安装router，less / scss，pinia，axios，element / Ant Design Vue，Echarts ，mockjs，以及如何配置@别名，自定义组件，vue-devtools插件。
拥抱vite + vue3，制作一款属于自己的音乐播放器。
足各路
03-18 1438
基于 VITE + VUE3 + TS + PINIA + TAILWINDCSS 开发的音乐播放器，界面模仿网易云音乐客户端。
手把手教你使用vite简单搭建ts+vue3全家桶
ganle的博客
10-20 1万+
一、vite环境搭建，构建vite-vue-ts项目 1、安装vite环境 npm init @vitejs/app 或者 yarn create @vitejs/app 2、使用vite初始化vite+vue+ts的项目 npm init @vitejs/app app-name 或者 yarn create @vitejs/app app-name 3、选择项目类型为vue+ts（小tips:git bash中直接按上下键切换选择自己想要的选项，虽然界面中不会动态展示切
VUE3+Vite开发网易云音乐 Day1 后端环境搭建
build2024
06-23 1551
这种方式安装，一般不成功，因为服务器是在国外的，会显示下载超时 。例如 2. 网易云API下载成功后，进行依懒安装2.1 使用vs code开发，打开网易云项目，按Ctrl+` 打开一个终端 2.2 如果安装完成，提示这个界面，根据它的指令，输入npm audit fix 或npm audit fix --force2.3 下载完成2.4 输入 node app.js 把网易云API后端运行起来 2.5 访问 3000 端口.........
web前端框架配置：vite+vue3+ts
invisibleI的博客
10-17 2971
vite+ts+vue3创建项目（不定时更新）
Vue3+TS+Vite 入门指南
Moonoly的博客
05-03 1万+
最近尝试上手 Vue3+TS+Vite，对比起 Vue2 有些不适应，但还是真香~ Vue3 带来的变化主要有以下几个方面：
将express+vue3+vite发布为独立 Web 应用
07-17
要将Express+Vue3+Vite应用程序发布为独立的Web应用，您可以按照以下步骤进行操作： 1. 在本地开发环境中构建Vue3应用程序。在项目根目录下打开终端或命令提示符，运行以下命令： ```bash npm run build ``` 这将使用Vite构建工具编译和打包Vue3应用程序，并将生成的静态文件保存在`dist`目录中。 2. 创建一个Express服务器来托管Vue3应用程序。在项目根目录下创建一个名为`server.js`的文件，并添加以下内容： ```javascript const express = require('express'); const path = require('path'); const app = express(); // 静态文件托管 app.use(express.static(path.join(__dirname, 'dist'))); // 所有路由重定向到index.html app.get('*', (req, res) => { res.sendFile(path.join(__dirname, 'dist', 'index.html')); }); // 启动服务器 const port = process.env.PORT || 3000; app.listen(port, () => { console.log(`Server is running on port ${port}`); }); ``` 在上述示例中，我们使用Express创建了一个简单的服务器。我们通过`express.static`中间件来托管生成的静态文件，然后将所有路由重定向到`index.html`以支持Vue的单页应用。最后，我们使用`app.listen`方法来启动服务器，并指定端口号。 3. 在项目根目录下打开终端或命令提示符，运行以下命令启动Express服务器： ```bash node server.js ``` 这将在本地启动Express服务器，并监听指定的端口（默认为3000）。 4. 现在，您的Express+Vue3+Vite应用程序已经作为一个独立的Web应用在本地运行起来了。您可以在浏览器中访问`http://localhost:3000`来查看应用程序。 5. 要将应用程序部署到生产环境，您可以选择将静态文件和服务器文件上传到云服务器或托管平台，如AWS、Azure、Heroku等。具体的部署步骤将取决于您选择的部署平台。 请注意，上述示例仅提供了一个简单的发布流程，并且假设您已经拥有一个可用的服务器用于托管应用程序。在实际部署过程中，您可能还需要考虑安全性、性能优化、域名绑定等方面的问题。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端corner

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值