CL0940-全网稀缺Vue 2.0高级实战 独立开发专属音乐WebAPP

学习要趁早,点滴记录,学习就是进步!

随笔背景:在很多时候,很多入门不久的朋友都会问我:我是从其他语言转到程序开发的,有没有一些基础性的资料给我们学习学习呢,你的框架感觉一下太大了,希望有个循序渐进的教程或者视频来学习就好了。对于学习有困难不知道如何提升自己可以加扣:1225462853进行交流得到帮助,获取学习资料.

下载地址:http://pan.baidu.com/s/1jI05TPW

基于Vue 全家桶 (2.x)制作的移动端音乐 WebApp ,一个媲美原生的移动端音乐 App,项目完整、功能完备、UI美观、交互一流。

学会能直接用在工作中的组件

13个

基础组件

1.confirm:确认对话框组件

2.listview:通讯录列表组件

3.loading:加载态组件

4.no-result:无结果展示组件

5.progress-bar:进度条组件

6.progress-circle:圆形进度条组件

7.scroll:移动端滚动组件

8.search-box:搜索框组件

9.search-list:搜索列表组件

10.slider:轮播图组件

11.switches:开关切换组件

12.top-tip:顶部消息提示组件

13. song-list:歌曲列表组件

15个

业务组件

1.add-song:添加歌曲到列表组件

2.disc:歌单详情页组件

3.m-header:页面头部组件

4.music-list:歌曲列表页面组件

5.player:播放器内核组件

6.playlist:播放列表组件

7.rank:排行榜页面组件

9.search:搜索页面组件

8.recommend:推荐页面组件

10.singer:歌手页面组件

11.singer-detail:歌手详情页组件

12.suggest:搜索提示列表组件

13.tab:顶部导航栏组件

14.top-list:排行榜详情页组件

15.user-center:用户中心页组件

技术栈

【前端】

Vue:用于构建用户界面的 MVVM 框架。它的核心是响应的数据绑定和组系统件

vue-router:为单页面应用提供的路由系统,项目上线前使用了Lazy Loading Routes技术来实现异步加载优化性能

vuex:Vue 集中状态管理,在多个组件共享某些状态时非常便捷

vue-lazyload:第三方图片懒加载库,优化页面加载速度

better-scroll:iscroll 的优化版,使移动端滑动体验更加流畅

Sass(Scss):css 预编译处理器

ES6:ECMAScript 新一代语法,模块化、解构赋值、Promise、Class 等方法非常好用

【后端】

Node.js:利用 Express 起一个本地测试服务器

jsonp:服务端通讯。抓取 QQ音乐(移动端)数据

axios:服务端通讯。结合 Node.js 代理后端请求,抓取 QQ音乐(PC端)数据

【自动化构建及其他工具】

vue-cli:Vue 脚手架工具,快速初始化项目代码

eslint:代码风格检查工具,规范代码书写

vConsole:移动端调试工具,在移动端输出日志

收获

总结了一套 Vue 通用组件,可以在其它项目中复用的 10+ 个基础组件、15+ 个业务组件

总结了一套常用的 SCSS mixin 库

总结了一套常用的 JS 工具函数库

体会到组件化、模块化开发带来的便捷

体会到将对象封装成类(ES6 class) 的便捷性,以及利用工厂方式初始化类实例

学会利用js编写过渡效果及动画效果制作良好的用户交互体验

TODO

歌曲数据全部来自 QQ 音乐,接口改变了可能就要修改jsonp和axios代码

由于项目的应用级状态不多(10个左右),所以就没有将action、mutation、和getters分割到单独的文件。但这样架构并不便于维护

实现细节

主要页面:播放器内核页、推荐页、歌单详情页、歌手页、歌手详情页、排行页、搜索页、添加歌曲页、个人中心页等。

核心页面:播放器内核页

组件树

时间: 2024-10-10 19:26:22

CL0940-全网稀缺Vue 2.0高级实战 独立开发专属音乐WebAPP的相关文章

全网稀缺Vue2.0高级实战独立开发专属音乐WebAPP

第1章 课程内容介绍包括课程概述.课程安排.学习前提.讲授方式等方面的介绍,最后演示了整个音乐App的功能,让同学们对课程项目有一个直观的了解. 第2章 项目准备工作包括项目需求分析.脚手架初始化代码.项目目录介绍及图标字体.公共样式等资源的准备        . 第3章 页面骨架开发包括页面入口.header 组件的编写.路由配置及顶导 tab 组件开发. 第4章 推荐页面开发包括 jsonp 原理介绍和 Promise 封装.轮播图组件开发.歌单接口数据分析和抓取.axios 介绍和后端接口

Vue+Node+MongoDB高级全栈开发

第1章 本地与服务器环境准备介绍微信公众号/小程序/域名/服务器的申请选购流程,在本地与线上服务器分别对项目的运行环境进行搭建部署,如 Node.js/Vue/Yarn/PM2/Nginx/MongoDB 等等,同时会来简单介绍下从本地通过 PM2 利用 Git 仓库直接往线上服务器部署以及 Nginx 端口映射解析特定域名的实现流程,最终准备好本地线上和外部业务环境为开发...1-1 导学1-2 课程简介1-3 申请认证公众服务号与小程序1-4 选购域名与备案解析域名1-5 选购配置服务器1-

从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十一║Vue实战:开发环境搭建【详细版】

系列教程一目录:.netcore+vue 前后端分离 系列教程二目录:DDD领域驱动设计 系列教程三目录:Nuxt.js TiBug系统 系列教程四目录:VueAdmin 后台管理系统 系列教程五目录:IdentityServer4 授权服务器 本文梯子 缘起 零.今天要完成左下角红色的部分 A.Vue 常见的IDE —— 我是开发工具,干活的都是我 1.VsCode 2.Webstorm 3.Atom B.安装Nodejs环境 —— 我是运行环境,没我不行 C.安装 npm / cnpm ——

Vue + Spring Boot 项目实战(一):项目简介 򗊪

原文: http://blog.gqylpy.com/gqy/489 置顶:来自一名75后老程序员的武林秘籍--必读(博主推荐) 来,先呈上武林秘籍链接:http://blog.gqylpy.com/gqy/401/ 你好,我是一名极客!一个 75 后的老工程师! 我将花两分钟,表述清楚我让你读这段文字的目的! 如果你看过武侠小说,你可以把这个经历理解为,你失足落入一个山洞遇到了一位垂暮的老者!而这位老者打算传你一套武功秘籍! 没错,我就是这个老者! 干研发 20 多年了!我也年轻过,奋斗过!我

Vue 框架-08-基础实战 demo

Vue 框架-08-基础实战 demo 前面介绍了有 7 篇了,都是小实例,没有相对完整的应用,虽然有些功能挺实用,但还是有的不常用的,今天记录一篇关于前几篇基础内容的实战 demo,也是对 Vue 基础的简单应用. 来看截图: 源代码 html 文件: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>VueLearn-cnblogs/xpwi<

开发微信全家桶项目 Vue Node MongoDB高级技术栈全覆盖

开发微信全家桶项目 Vue Node MongoDB高级技术栈全覆盖链接:https://pan.baidu.com/s/15-9Ne3vFEFPzJA0wyltxrg 提取码:加Q:1642261812 V信:SH66668888QH 获取 第1章 本地与服务器环境准备介绍微信公众号/小程序/域名/服务器的申请选购流程,在本地与线上服务器分别对项目的运行环境进行搭建部署,如 Node.js/Vue/Yarn/PM2/Nginx/MongoDB 等等,同时会来简单介绍下从本地通过 PM2 利用

Django高级实战 开发企业级问答网站

第1章 Django高级实战-开发企业级问答网站课程项目结合:需求分析/Django高级用法/算法/设计模式/TestCase测试/云计算服务.本章将具体介绍课程的学习内容和目标,描述问答网站的业务场景.用途.重要性.实用性.学习本课程需要具备的知识,项目使用的技术栈,重难点:让同学们对课程的技术范畴,广度和难度有心理准备.演示网站的所有功能,结果导向,一目了然.... 第2章 Django项目的一些最佳实践最佳实践目的是使生产或管理实践的结果达到最优,并减少出错的可能性.本章讲的一些实践方法在

2019刘老师教你用springboot2.x开发整合微信支付的线上教育平台带源码送springboot2.x零基础入门到高级实战教程

第一部分:springboot2.x零基础入门到高级实战教程一.零基础快速入门SpringBoot2.0 1.SpringBoot2.x课程全套介绍和高手系列知识点 简介:介绍SpringBoot2.x课程大纲章节 java基础,jdk环境,maven基础 2.SpringBoot2.x依赖环境和版本新特性说明 简介:讲解新版本依赖环境和springboot2新特性概述 3.快速创建SpringBoot2.x应用之手工创建web应用 简介:使用Maven手工创建SpringBoot2.x应用 4

Vue 3.0源码发布,前端程序员:“我真的学不动了!”

那天刷知乎,发现超多人唱衰前端岗,搞的小白和刚入行的新人人心惶惶,不知道自己入行的决定到底是对是错. 前端知识的学习不像上学,只局限在书本上的知识,层出不穷的热点和事件,多到让我们分不清什么是过时和新潮.以前能讲得清 ES6 的人已经很厉害了,可现在 ES8 都出来很久了,真是一刻都不能停止学习. 要是没什么人带领,就算每天都能追上热点,知道潮流的语言,刷再多论坛看再多分享,缺少实操的机会,也是白费功夫. 那么,到底什么样的能力,才是前端开发必备的?你与阿里P6的程序员,差在哪里?前端岗位该如何