基于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 ...
随机推荐
- Python爬虫学习之使用beautifulsoup爬取招聘网站信息
菜鸟一只,也是在尝试并学习和摸索爬虫相关知识. 1.首先分析要爬取页面结构.可以看到一列搜索的结果,现在需要得到每一个链接,然后才能爬取对应页面. 关键代码思路如下: html = getHtml(& ...
- 【最短路】 ZOJ 1544 Currency Exchange 推断负圈
给出 N 种货币 M 条兑换关系 開始时全部的货币S 和有X 块钱 接下来M条关系 A B W1 W2 W3 W4 表示 A->B 所需的手续费为W2块钱 汇率为W1 B->A 所需的手 ...
- 将java项目打包为jar
打开Eclipse,点击file,选择export 选择java,选择其中的JAR file并点击next 选择需要的到处的项目,并在下方输入将项目保存为的目录,文件名字. 如果,已经将项目打包为一个 ...
- Python 3.6.3 利用 Dlib 19.7 和 opencv 实现人脸68点定位 进行人脸识别
0.引言 介绍利用Dlib官方给的人脸识别预测器"shape_predictor_68_face_landmarks.dat"进行68点标定,利用OpenCv进行图像化处理,在人脸 ...
- 【java】文件操作java.io.File
package 文件操作; import java.io.File; import java.io.IOException; public class TestFile { public static ...
- 【python】字符串
>>> str1="welcom to China">>> str1[2:4]'lc'>>> str1[7]'t'>&g ...
- MySQL操作时间的函数集
求两个Timestamp之间的秒差值: select TIMESTAMPDIFF(SECOND,TIMESTAMP("2017-03-01 07:58:20"),timestamp ...
- Xamarin android SwipeRefreshLayout入门实例
android SwipeRefreshLayout 是实现的效果就是上滑下拉刷新ListView 获取其他控件数据.基本上每个App都有这种效果.Google提供了一个官方的刷新控件SwipeRef ...
- install pytorch
1. install and update pip3 2. install numpy and scipy 3. install pytorch
- java数组去重
java数组去重 1.创建新数组,用于保存比较结果 2.设定随机数组最大最小值 3.开始去重 4.计算去重所需时间 package org.zheng.collection; import java. ...