IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> vue3+ts+ElementPlus 实战项目 musicPlus -> 正文阅读

[JavaScript知识库]vue3+ts+ElementPlus 实战项目 musicPlus

项目成果

image.png

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

技术栈分布情况

在这里插入图片描述

学习收获

学习此项目你将会收获

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

项目运行

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

git clone 项目地址
npm install
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 求点赞 求关注
在这里插入图片描述

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-02-28 15:20:07  更:2022-02-28 15:20:54 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 9:22:02-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码