【本博客为原创: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的网易云音乐的更多相关文章

  1. 基于Taro与Typescript开发的网易云音乐小程序

    基于Taro与网易云音乐api开发,技术栈主要是:typescript+taro+taro-ui+redux,目前主要是着重小程序端的展示,主要也是借此项目强化下上述几个技术栈的使用,通过这个项目也可 ...

  2. 基于Taro与typescript开发的网易云音乐小程序(持续更新)

    基于Taro与网易云音乐api开发,技术栈主要是:typescript+taro+taro-ui+redux,目前主要是着重小程序端的展示,主要也是借此项目强化下上述几个技术栈的使用,通过这个项目也可 ...

  3. 基于 vue2 + vuex 构建一个具有 45 个页面的大型单页面应用

    源码地址: https://github.com/bailicangdu/vue2-elm 技术栈 vue2 + vuex + vue-router + webpack + ES6/7 + fetch ...

  4. 基于vue2.0的网易云音乐 (实时更新)

    本人在自学vue,之后想在学习过程中加以实践.由于之前有做过jquery的播放器效果,ui仿照网易云,地址 www.daiwei.org/music 于是就想做vue 的网易云播放器,网上也有类似的项 ...

  5. 用vue-cli脚手架搭建一个仿网易云音乐的全家桶vue项目

    一,vue-cli环境搭建 1,全局安装webpack npm install webpack -g 2,安装vue脚手架 npm install vue-cli -g 3,新建一个新的project ...

  6. NeteaseCloudWebApp模仿网易云音乐的vue自己从开源代码中学习到的

    github地址: https://github.com/javaSwing/NeteaseCloudWebApp 1.Vue.prototype.$http = Axios // 类似于vue-re ...

  7. Vue 实现网易云音乐 WebApp

  8. 瓣呀,一个基于豆瓣api仿网易云音乐的开源项目

    整体采用material design 风格,本人是网易云音乐的粉丝,所以界面模仿了网页云音乐,另外,项目中尽量使用了5.0之后的新控件. 项目整体采用mvp+rxjava+retrofit 框架,使 ...

  9. python 全栈开发,Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)

    昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...

随机推荐

  1. 》》css3--动画

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  2. More DETAILS! PBR的下一个发展在哪里?

    最近几年图形学社区对PBR的关注非常高,也许是由于Disney以及一些游戏引擎大厂的助推,也许是因为它可以被轻松集成进实时渲染的游戏引擎当中,也许是因为许多人发现现在只需要调几个参数就能实现具有非常精 ...

  3. 两款主流项目管理软件PK,哪个更好用?

    两款主流项目管理软件PK,哪个更好用? 一.产品介绍 JIRA是Atlassian公司出品的项目与事务跟踪工具,被广泛应用于缺陷跟踪.客户服务.需求收集.流程审批.任务跟踪.项目跟踪和敏捷管理等工作领 ...

  4. Python的类(class)

    python 3.6 官方文档  https://docs.python.org/3.6/index.html python 3.6 的类 https://docs.python.org/3.6/tu ...

  5. linux系统下安装单台Redis

    注意:搭建redis前一定要安装gcc redis安装方式一 1.安装gcc命令:yum install -y gcc #安装gcc [root@localhost src]# yum install ...

  6. python_web----------数据可视化从0到1的过程

    一.数据可视化项目配置 1. django + Echarts 2. 服务器(linux:Ubuntu 17.04 (GNU/Linux 4.10.0-40-generic x86_64)) 3. I ...

  7. Asp.Net Web API(一)

    什么是Web API HTTP不仅仅服务于Web Pages.他也是一个创建展示服务和数据的API的强大平台.HTTP是简单的,灵活的,无处不在的.你能够想象到几乎任何的平台都会有HTTP服务库.HT ...

  8. 【java】Date与String之间的转换及Calendar类:java.text.SimpleDateFormat、public Date parse(String source) throws ParseException和public final String format(Date date)

    package 日期日历类; import java.text.ParseException; import java.text.SimpleDateFormat; import java.util. ...

  9. SQL Server-聚焦ROW_NUMBER VS TOP N性能

    前言 抱歉各位,从八月份开始一直在着手写EntityFramework 6.x和EntityFramework Core 2.0的书籍写作,所以最近一直遗漏了对博客的管理,后面会着手于写SQL Ser ...

  10. LINUX:alias命令详解

    发现目前安装的g++并没有开启选项 -std=c++11,无法使用c++11的新标准及其中的列表初始化.搜索后得到解决方法:键入:alias  g++="g++ -std=c++11&quo ...