基于vue2+vuex+vue-router+sass+webpack的网易云音乐
【本博客为原创:http://www.cnblogs.com/HeavenBin/】
前言:
这段时间写的一个项目,供给大家互相学习,有什么疑问可以issues我。
源码地址:https://github.com/HeavenBin/VueMusic
项目构成
├── build // webpack配置文件
├── config // 不同环境的打包配置
├── dist // 生产目录
├── index.html // 入口html文件
├── package.json // 项目配置文件
├── static // 放置静态资源
├── src // 开发目录
│ ├── pages // 页面
│ ├── components // 组件
│ ├── config // 基本配置
│ ├── images // 公共图片
│ ├── plugins // 引用插件
│ ├── router // 路由配置
│ ├── service // 数据交互
│ ├── store // vuex状态管理
│ ├── style // 公共样式
│ ├── App.vue // 页面入口文件
│ └── main.js // 程序入口文件
技术栈
- Vue2:采用现代渐进式框架Vue2的版本
- Vuex:管理公共组件状态量
- vue-router:管理单页面应用路由
- 自定义ajax:基于xmlhttprequest对象以及新兴Fetch对象结合封装的http请求
- CSS3:CSS3动画及样式。
- Sass:css预处理语言。
- Webpack:自动化构建工具,主要配置vue-cli脚手架提供。
- ES6:采用ES6语法。
- SVG:基于可扩展标记语言的可缩放矢量图形。
- 接口来源(感谢Binaryify不断更新的网易云音乐接口)
如果您认为这篇文章还不错或者有所收获,您可以通过扫描一下下面的支付宝二维码 打赏我一杯咖啡【物质支持】,也可以点击右下角的【推荐】按钮【精神支持】,因为这两种支持都是我继续写作,分享的最大动力

基于vue2+vuex+vue-router+sass+webpack的网易云音乐的更多相关文章
- 基于Taro与Typescript开发的网易云音乐小程序
基于Taro与网易云音乐api开发,技术栈主要是:typescript+taro+taro-ui+redux,目前主要是着重小程序端的展示,主要也是借此项目强化下上述几个技术栈的使用,通过这个项目也可 ...
- 基于Taro与typescript开发的网易云音乐小程序(持续更新)
基于Taro与网易云音乐api开发,技术栈主要是:typescript+taro+taro-ui+redux,目前主要是着重小程序端的展示,主要也是借此项目强化下上述几个技术栈的使用,通过这个项目也可 ...
- 基于 vue2 + vuex 构建一个具有 45 个页面的大型单页面应用
源码地址: https://github.com/bailicangdu/vue2-elm 技术栈 vue2 + vuex + vue-router + webpack + ES6/7 + fetch ...
- 基于vue2.0的网易云音乐 (实时更新)
本人在自学vue,之后想在学习过程中加以实践.由于之前有做过jquery的播放器效果,ui仿照网易云,地址 www.daiwei.org/music 于是就想做vue 的网易云播放器,网上也有类似的项 ...
- 用vue-cli脚手架搭建一个仿网易云音乐的全家桶vue项目
一,vue-cli环境搭建 1,全局安装webpack npm install webpack -g 2,安装vue脚手架 npm install vue-cli -g 3,新建一个新的project ...
- NeteaseCloudWebApp模仿网易云音乐的vue自己从开源代码中学习到的
github地址: https://github.com/javaSwing/NeteaseCloudWebApp 1.Vue.prototype.$http = Axios // 类似于vue-re ...
- Vue 实现网易云音乐 WebApp
- 瓣呀,一个基于豆瓣api仿网易云音乐的开源项目
整体采用material design 风格,本人是网易云音乐的粉丝,所以界面模仿了网页云音乐,另外,项目中尽量使用了5.0之后的新控件. 项目整体采用mvp+rxjava+retrofit 框架,使 ...
- python 全栈开发,Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)
昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...
随机推荐
- QQ互联申请及配置
今天要说的只是针对QQ互联的操作,其他的互联请参考相关网站. 第一步:需要申请API接口的两码 自行登录QQ互联https://connect.qq.com/index.html,然后按照要求申请就O ...
- Android开发之漫漫长途 Ⅷ——Android Binder(也许是最容易理解的)
该文章是一个系列文章,是本人在Android开发的漫漫长途上的一点感想和记录,我会尽量按照先易后难的顺序进行编写该系列.该系列引用了<Android开发艺术探索>以及<深入理解And ...
- OJ随笔——【1102-海明距离】——位运算
题目如下: Description 海明距离是在指二进制情况下,一个整数变成另外一个整数需要翻转的位数.比如2转换到3需要翻转1位,所以2到3的海明距离是1.给你两个正整数x和y,(x,y<=1 ...
- ML02: 机器学习KNN 算法
摘要: 一张图说清楚KNN算法 看下图,清楚了吗? 没清楚的话,也没关系,看完下面几句话,就清楚了. KNN算法是用来分类的. 这个算法是如何来分类的呢? 看下图,你可以想想下图中的 『绿色圆点』 ...
- 【ANT】创建删除目录,复制移动重命名文件
一.创建目录: <?xml version="1.0"?> <project default="test_mkdir"> <tar ...
- TCP/IP的那些事--子网掩码
当前互联网使用的主要是IPv4协议,它是第一个被广泛使用,构成现今互联网的基础的协议.但是,随着用户数量的增多,IPv4包含的IP资源在不断减少.或许你会想,不是还有IPv6吗?IPv6的容量足以应付 ...
- iOS MJRefresh下拉、上拉刷新自定义以及系统详细讲解
更新: MJRefresh 更新功能,默认根据数据来源 自动显示 隐藏footer,这个功能可以关闭 DoctorTableView.mj_footer.automaticallyHidden = N ...
- Wincc flexable的数据记录的组态
1.数据记录就是将PLC采集的数据记录下来如下,注意只有TP270和OP270以上的HMI设备才有数据记录 2.练习展示 3.开始创建数据记录 4.组态数据记录 5.组态变量的记录属性.将数据记录和变 ...
- MySQL数据库 Event 定时执行任务.
一.背景 由于项目的业务是不断往前跑的,所以难免数据库的表的量会越来越庞大,不断的挤占硬盘空间.即使再大的空间也支撑不起业务的增长,所以定期删除不必要的数据是很有必要的.在我们项目中由于不清理数据,一 ...
- 统计nginx单个IP访问日志并获取IP来源
#!/usr/bin/env python #coding=utf-8 import requests from urllib2 import urlopen # import lxml.html f ...