vue3+ts+ElementPlus 实战项目 musicPlus

项目成果

image.png

码云地址:码云项目地址
b站视频地址:视频演示地址
觉得不错的话,帮忙点个star!万分感谢
具体效果下载项目后浏览,相当于用vue3 ts 重构了之前的项目

技术栈分布情况

在这里插入图片描述

学习收获

学习此项目你将会收获

  • vue3的项目实战使用 setup等新增语法使用以及结合ts对vue3的支持
  • ElementPlus项目实战使用 对应更新内容的调整
  • 使用工程化管理项目的书写规范 提交风格等
  • ts 封装vuex中的mapgetters… 封装网络请求
  • vue3封装具有更强通用性的组件以及封装组件的思想
  • 如何正确的根据项目结构化来划分
  • ts 的项目综合使用等…

项目运行

项目需要配合本地服务器来使用
下载运行项目

git clone 项目地址
npm install
npm run prettier //第一次下载最好先格式化下代码
npm run serve

下载运行本地服务器
接口地址
去github上克隆下来
具体步骤看上面说明,实在不会可以私聊我拿本地运行操作步骤文档

项目工程化搭建

一两句话说不清楚,需要的可以私聊我,我会将专门的文档发给你,上面有详细的步骤声明!!!
工程化提交项目流程如下

npm run prettier // 格式化代码
npm run lint // 检测语法错误
git add .
npm run commit
git push origin master

项目补充

由于一些原因,项目没有完全做完,但是大部分都完成了。之前vue2版本的问题也得到了修复,实在是最近太忙,自己一个人没有太多的精力来完成,希望大家见谅,大家愿意动手的话也可以在此基础上继续完善,但是希望能表明出处。
另外一些和vue2那个版本差不多,大家可以参考我另一篇文章 在这里!!!
求star!!!

项目结构划分 (src)

操作方法:cmd到对应文件夹输入tree命名即可

├─assets(资源)
│ ├─css
│ │ ├─bottombar
│ │ ├─now-music
│ │ └─topbar
│ └─img
│ ├─backgroundimg
│ ├─down
│ ├─login
│ ├─musicplay
│ └─now-music
├─base-ui (基本组件)
│ ├─card-item
│ │ └─src
│ ├─card-pays
│ │ └─src
│ ├─comment
│ │ └─src
│ ├─form
│ │ ├─src
│ │ └─type
│ ├─header
│ │ └─src
│ ├─swiper
│ │ ├─src
│ │ └─type
│ ├─table
│ │ └─src
│ └─tag-title
│ └─src
├─components (项目组件)
│ ├─bottombar
│ │ ├─hook
│ │ └─src
│ ├─centerall
│ │ ├─cpns
│ │ └─src
│ ├─page-find-music
│ │ ├─page-anchor-station
│ │ │ ├─category-nav-icon
│ │ │ │ └─src
│ │ │ └─page-content
│ │ │ ├─cpns
│ │ │ └─src
│ │ ├─page-news-music
│ │ │ ├─page-music-ablum
│ │ │ │ └─src
│ │ │ └─page-music-table
│ │ │ └─src
│ │ ├─page-ranking-list
│ │ │ └─rank-card
│ │ │ └─src
│ │ ├─page-songs-list
│ │ │ └─tag-cat-name
│ │ │ └─src
│ │ └─page-style-music
│ │ ├─newest-music
│ │ │ ├─cpns
│ │ │ └─src
│ │ ├─recommend-song-list
│ │ │ └─src
│ │ └─sole-play
│ │ └─src
│ └─topbar
│ ├─config
│ ├─cpns
│ └─src
├─gloable(全局方法)
├─hook (hooks)
├─router (路由)
├─service (网络请求)
│ ├─find-music
│ │ ├─anchor-station
│ │ ├─news-music
│ │ ├─ranking-list
│ │ ├─singer-search
│ │ ├─songs-list
│ │ └─style-music
│ ├─login
│ ├─mvvideo
│ ├─now-music
│ ├─play-music
│ ├─request
│ ├─singer
│ └─song-sheet
├─store (vuex)
│ ├─login
│ ├─mv-video
│ └─play-music
├─utils (通用方法)
└─views (主页面)
└─main
├─find-music
│ ├─children
│ │ └─config
│ ├─hook
│ ├─nav
│ └─src
├─mv-video
│ ├─cpns
│ ├─hook
│ └─src
├─now-music
│ ├─cpns
│ ├─hook
│ └─src
├─singer
│ ├─config
│ ├─cpns
│ ├─hook
│ └─src
└─song-sheet
├─config
├─cpns
├─hook
└─src

end

求star 求点赞 求关注
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/kzj0916/article/details/123161883