【本博客为原创: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. Python爬虫学习之使用beautifulsoup爬取招聘网站信息

    菜鸟一只,也是在尝试并学习和摸索爬虫相关知识. 1.首先分析要爬取页面结构.可以看到一列搜索的结果,现在需要得到每一个链接,然后才能爬取对应页面. 关键代码思路如下: html = getHtml(& ...

  2. 【最短路】 ZOJ 1544 Currency Exchange 推断负圈

    给出 N 种货币 M 条兑换关系 開始时全部的货币S 和有X 块钱 接下来M条关系 A B W1 W2 W3 W4 表示 A->B 所需的手续费为W2块钱  汇率为W1 B->A 所需的手 ...

  3. 将java项目打包为jar

    打开Eclipse,点击file,选择export 选择java,选择其中的JAR file并点击next 选择需要的到处的项目,并在下方输入将项目保存为的目录,文件名字. 如果,已经将项目打包为一个 ...

  4. Python 3.6.3 利用 Dlib 19.7 和 opencv 实现人脸68点定位 进行人脸识别

    0.引言 介绍利用Dlib官方给的人脸识别预测器"shape_predictor_68_face_landmarks.dat"进行68点标定,利用OpenCv进行图像化处理,在人脸 ...

  5. 【java】文件操作java.io.File

    package 文件操作; import java.io.File; import java.io.IOException; public class TestFile { public static ...

  6. 【python】字符串

    >>> str1="welcom to China">>> str1[2:4]'lc'>>> str1[7]'t'>&g ...

  7. MySQL操作时间的函数集

    求两个Timestamp之间的秒差值: select TIMESTAMPDIFF(SECOND,TIMESTAMP("2017-03-01 07:58:20"),timestamp ...

  8. Xamarin android SwipeRefreshLayout入门实例

    android SwipeRefreshLayout 是实现的效果就是上滑下拉刷新ListView 获取其他控件数据.基本上每个App都有这种效果.Google提供了一个官方的刷新控件SwipeRef ...

  9. install pytorch

    1. install and update pip3 2. install numpy and scipy 3. install pytorch

  10. java数组去重

    java数组去重 1.创建新数组,用于保存比较结果 2.设定随机数组最大最小值 3.开始去重 4.计算去重所需时间 package org.zheng.collection; import java. ...