仿网易云音乐的移动应用前端工程(vue-cli4.x+vant+vuex+vue-router+mongoDB+express)

最新推荐文章于 2023-03-05 18:26:37 发布
最新推荐文章于 2023-03-05 18:26:37 发布
阅读量420 收藏 3
点赞数
分类专栏： Vue-cli 文章标签： vue html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33763827/article/details/107027212
版权

这是一个仿网易云音乐的移动应用前工程说明。
(前端有一些没有仿照网易云音乐现有版本的UI设计，简化了UI和一些功能，自己重新设计了比较简单的UI，目前还是大三，对于优化之类的都不大熟悉，文件仅供参考,欢迎讨论指正)
本工程github链接
后端工程github链接
后端博客链接
网易云音乐API链接

技术/资源

  1. Vue-cli 4.4.0 vue脚手架
  2. vue-router 路由
  3. vuex 状态管理
  4. scss 专业级CSS扩展语言
  5. vant 有赞开发的vue移动端ui库
  6. postcss 屏幕适配插件
  7. NeteaseCloudMusicApi 网易云音乐 NodeJS 版 API
  8. iconfont 阿里巴巴图标库

详细配置流程可参见链接：vue-cli4.x 移动端项目基础配置(记录)

工程目录

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

效果图

在这里插入图片描述

添加大量注释

举例截图
在这里插入图片描述
在这里插入图片描述

记录心得

在这里插入图片描述

不说别的就是很菜
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
仿网易云音乐app前端源码
08-10
仿网易云音乐app前端源码 apicloud代码 网易云音乐播放器webapp代码
Vue高仿网易云音乐APP (vue.js 移动端)
热门推荐
路漫漫其修远兮，吾将上下而求索。
09-06 1万+
学习vue而写的一个小项目，整个界面我都是照着网易云音乐移动端app的样子写的。
基于vue全家桶开发的一款移动端音乐播放器界面模仿网易云音乐
08-12
基于vue全家桶开发的一款移动端音乐播放器，界面模仿网易云音乐。技术栈vue vuex vue-router axios ES6 flex MuseUI。
仿网易云音乐的移动应用后端工程(vue-cli4.x+vant+vuex+vue-router+mongoDB+express)
VVVVV
06-29 331
这是一个仿网易云音乐的移动应用后端工程说明。 (网易云有登录注册等的接口，但是由于没有做过移动端的应用，对于express和mongoDB都不熟悉，所以没有用接口，直接自己写了个后端来实践一些交互操作，目前还是大三，对于优化之类的都不大熟悉，文件仅供参考,欢迎讨论指正。) 本工程github链接 技术栈 express：node.js的后端框架 MongoDB：数据库 工程目录 工程配置步骤 安装express cnpm i express --S 安装mongoose cnpm i mongoos
vue3仿网易云移动应用
qq_46562878的博客
06-28 2267
vue3 vant 仿网易云web移动端
vue-cli3 + vant + postcss-px2rem实现移动端页面.docx
09-06
vue-cli3 + vant + postcss-px2rem实现移动端页面
vue-cli3.x+vue+vue-router+axios+node.js+mysql.zip
最新发布
02-23
Vue CLI 3.x 是 Vue.js 官方推出的一款强大的脚手架工具，它极大地简化了 Vue 应用的初始化和构建过程。Vue CLI 提供了一套预设的配置，包括热加载、代码分割、ES2015 编译等，使得开发者可以快速搭建 Vue 项目。 ...
vue3.x+vite+ts+vue-router@4.x 路由使用demo
07-24
通过这个示例项目，你可以了解到如何在 Vue3.x、Vite 和 TypeScript 的环境中设置和使用 Vue Router 4.x，这将对你的前端开发技能有极大的提升。同时，实践项目也能帮助你更好地理解和掌握这些技术的实战应用。
基于vue-cli4.0 vue-router4.x+vuex4.x+ant-design开发的后台管理系统模板.zip
02-02
是基于vue3.0 vue-cli4.0 vue-router4.x+vuex4.x+ant-design-vue2.x开发的后台管理系统模板，包含权限路由、权限按钮、流程配置、个人中心等基础功能. ## 文件 ```bash # vue-antd-admin - src - api - assets -...
vueSocketChatroom：vue2.x + vue-router2.x + vuex2.x + vux2.x + express + socket.io立即聊天室
02-05
节点7.x 自动重启节点服务器工具 npm i -g nodemon 质量检查工具 为代码编辑器安装eslint插件（例如vscode中的“ eslint”） 下载 # clone git clone git@github.com:Chanran/vueSocketChatroom.git cd ...
仿网易云APP
10-02
源码很多地方用到了-webkit-box属性，但是这个属性在不同的机子上支持不一样，还应该继续做好很多兼容性的东西。css动画在android不同的机子下面可能会出现抖动，没有ios的流畅，这个问题我也还在研究中，大家谁有更好的解决方法可以相互交流一下，可参考主页框架设计与代码的实现。
一个仿网易云音乐的demo
08-02
这是仿网易云音乐的app源码，很简便使用
基于JSP+Vue的仿网易云音乐网站
07-15
大学Web前端实训，前后端结合，前端使用Vue，后端使用JSP，仿网易云音乐网站的共享音乐网站。
基于vue的仿网易云音乐webapp
08-12
基于vue的仿网易云音乐webapp
vue项目-音乐播放器
06-06
近期看了js框架vue，自作了一个小项目，后期将继续完善与丰富功能
体验Vue3.0,　仿一个网易云音乐客户端
weixin_42686892的博客
01-16 1016
一、用到的技术栈 前端: vue3.0全家桶:(ts+jsx) vuex: vuex-module-decorators swiper:非常受欢迎与实用的轮播图插件，swiper create-keyframe-animation: 关键帧动画插件 axios: 数据请求 后端: github上开源的网易云音乐NodeJS版api接口NeteaseCloudMusicApi 其他: stylelint、stylelint-config-standard、stylelint-order:分别是
仿网易云音乐移动端效果图
m0_52444269的博客
06-22 201
vue 项目
【vue3仿网易云音乐app】主页代码解析之导航栏轮播图
EVELESLIE的博客
03-05 329
实际运行时，轮播图需要从后台网易云音乐api获取。使用axios来进行异步请求。在api/index.js中。一般来说js实现轮播图的原理是设置定时器实现轮播，为了方便使用swiper插件。通过getBanner获取到网易云实时轮播图数据并赋值给imgs数组。其中使用$router.push给。首先是topNav顶部导航栏组件。在script中指定预设图片。接下来是轮播图的实现。界面主页引入各个组件。
仿网易云移动端项目Vue3.2+Pinia+Vant+axios
切图仔
05-24 2873
仿网易云移动端项目Vue3.2+Pinia+Vant+axios前期准备（Pinia，rem，初始化样式，图标引入，vant组件，axios） 安装pinia 1.在main.js引入注册 2.创建store rem移动适配 1.创建rem.js实现移动适配布局 2.在index.html引入 3.可以用px to rem 插件进行px和rem转换 阿里图标引入(Symbol方法) 1.在官网添加项目后复制symbol代码在index.html引入 2.使用svg 3.初始化样式，设
前端vue毕设项目【易购商城】vue + vuex + vue-router + element ui + axios + vu
08-25
易购商城是一个基于Vue框架开发的前端毕设项目。在该项目中，我使用了Vue、Vuex、Vue Router、Element UI、Axios等技术和库来实现各种功能。 首先，Vue是一种流行的前端框架，它具有响应式的数据绑定和组件化的特性，使得开发者可以轻松构建交互性强、高效的单页面应用。 其次，我使用了Vuex来管理应用的状态。Vuex提供了一种集中式的状态管理方案，帮助我管理和共享全局的数据，使得不同组件之间的通信更加便捷。 Vue Router是Vue官方提供的路由管理库，用于实现页面之间的导航和路由跳转。我使用它来定义和管理不同页面之间的跳转逻辑，使得用户可以通过URL来访问和导航各个页面。 Element UI是一套基于Vue的桌面端组件库，它提供了丰富的UI组件和样式，使得我可以快速构建出美观和功能完善的界面。 为了与后端进行数据交互，我使用了Axios库。Axios是一个基于Promise的HTTP客户端，可以在前端与后端进行异步数据交互，使得用户可以实现登录、注册、添加购物车、结算等功能。 最后，我还使用了Vue插件vue-echarts和vue-awesome-swiper来实现商品数据的可视化展示和轮播图功能。这些插件都提供了强大且易用的功能，使得易购商城的用户界面更加丰富和吸引人。 总体来说，通过使用Vue、Vuex、Vue Router、Element UI、Axios等技术和库，我成功地实现了易购商城的前端开发工作，提供了丰富的功能和良好的用户体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值