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

Posted 2020-10-16

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

学习要趁早，点滴记录，学习就是进步！

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

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

下载地址：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分割到单独的文件。但这样架构并不便于维护

实现细节

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

核心页面：播放器内核页

组件树