基于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 ...
随机推荐
- ssm整合(基于xml配置方式)
本文是基于xml配置的方式来整合SpringMVC.Spring和Mybatis(基于注解的方式会再写一篇文章),步骤如下: (1)首先自然是依赖包的配置文件 pom.xml <project ...
- 电脑创建WIFI/无线热点之后, 手机QQ能上浏览器不能上网
这个完全是个人经验,绝对原创,请尊重博主原创权,转载请注明转于此博客. 问题如题,大家电脑创建无线热点之后, 有的人手机会出现QQ,微信能上网, 但是浏览器或者基于浏览器的那些比如应用商店不能上网, ...
- ftk学习记(list篇)
[声明:版权全部,欢迎转载.请勿用于商业用途. 联系信箱:feixiaoxing @163.com] 在開始今天的list主题之前,先看一下icon的执行效果. 今天说的list事实上和这个icon几 ...
- Explicit Semantic Analysis (ESA)
有别于LSA (Latent Semantic Analysis), 下列文章提出一种ESA (Explicit Semantic Analysis), 并介绍怎样使用ESA来进行语义相关性和文本分类 ...
- Python笔记·第七章—— IO(文件)处理
一.文件处理简介 计算机系统分为:计算机硬件,操作系统,应用程序三部分. 我们用python或其他语言编写的应用程序若想要把数据永久保存下来,必须要保存于硬盘中,这就涉及到应用程序要操作硬件,众所周知 ...
- javascript中的事件Event
一.事件流 1.事件流:描述的是从页面中接受事件的顺序 IE的事件流是事件冒泡流,Netscape的事件流是事件捕获流. 2.事件冒泡 IE的事件流叫做事件冒泡(event bubbing),即事件开 ...
- Java项目中使用Redis缓存案例
缓存的目的是为了提高系统的性能,缓存中的数据主要有两种: 1.热点数据.我们将经常访问到的数据放在缓存中,降低数据库I/O,同时因为缓存的数据的高速查询,加快整个系统的响应速度,也在一定程度上提高并发 ...
- 一起读源码之zookeeper(1) -- 启动分析
从本文开始,不定期分析一个开源项目源代码,起篇从大名鼎鼎的zookeeper开始. 为什么是zk,因为用到zk的场景实在太多了,大部分耳熟能详的分布式系统都有zookeeper的影子,比如hbase, ...
- Hibernate--使用xml配置映射关系
写在前面: 配置实体类与数据库的映射关系,有两种方式: 1.使用*.hbm.xml 2.使用@注解 二:xml的配置方式: eg:员工的xml配置文件: <?xml version=" ...
- Node之Express服务器启动安装与配置
首先安装express-generator cnpm i -g express-generator 使用express --version查看express版本 生成express服务 express ...