zhouwenchen / vue2-echo

基于vue2 + vue-router + vuex 构建的一个音乐类单页面应用 —— echo回声

vue2-echo

v3.0是基于vue-cli 3.0的，vue-cli 2.x版本请查看v2.0分支

前言

这是一个Vue学习系列，难度：容易 -> 中等 -> 困难， 3个复杂度和不同类型的项目，一步步地带领大家熟悉和深入Vue。这些系列项目将会涉及Vue的大部分知识，如果都能熟悉和掌握，那么就可以随心所欲地使用Vue去写单页面应用了。

注：此开源系列的知识点全部经历过线上实践，会考虑到细节、兼容和使用体验等问题。

技术栈

1. vue、 vue-router、 vuex
2. axios（请求库）
3. mint-ui（饿了么移动端UI库）
4. vue-progressbar（加载进度条）
5. amfe-flexible（淘宝适配库）
6. mockjs（数据模拟）
7. ES6/7（JS语法）、ESlint（JS语法规范）
8. Stylus（css预处理器）
9. IconFont（阿里字体库）

说明

如果此开源系列对你有帮助，你可以点右上角 "star"支持一下，非常感谢！^_^ 🌹

或者您可以 "follow（关注）" 一下作者，我正在不断开源更多实用的项目

如有问题可以直接在 Issues 中提，或者加入我们下方Vue群更进一步地交流

最终目标

Vue学习系列

• 第一阶段：vue2-echo —— echo回声（ 移动端，难度：★★☆☆☆ 入门项目）
• 第二阶段：vue2-news —— 今日头条（ 移动端，难度：★★★☆☆ 过渡项目）
• 第三阶段：vue2-health —— 头条号（ pc端，难度：★★★☆☆ 过渡项目）
• 第四阶段：vue2-native —— 今日头条（ native端，难度：★★★★☆ 进阶项目）

注：此系列只关注前端项目的实现，后端等知识不是此系列的范围，但会告知一二。

效果演示

演示戳这里（请使用手机模式预览）

功能

• 全站内播放（单页面优点）
• 播放行为：播放、暂停、下一首、一键播放
• 播放模式：默认、随机播放、单曲循环、列表循环
• 播放视图：播放进度条（可调节）、播放列表（可增删、切换）

项目截图

目录结构

├── src                          
│   ├── api                      // 请求api
│   ├── assets                   // 静态资源
│   ├── components               // 全局组件
│   ├── components               // 全局过滤
│   ├── mock                     // 模拟数据
│   ├── page                   
│   |   ├── detail               // 详情页
│   |   ├── index                // 首页
│   ├── router                   // 路由
│   ├── store                    // 状态管理
│   ├── utils                   
│   |   ├── cache.js             // 缓存方法
│   |   ├── request.js           // 请求方法
│   ├── App.vue
│   └── main.js
├── package.json                 // 项目依赖
└── vue.config.js                // vue-cli 3.0配置

安装运行

# 安装依赖
npm install

# 启动项目
npm run serve

# 打包项目
npm run build

更新日志

发行说明中记录了每个版本的详细更改。

交流

欢迎热爱学习、忠于分享的朋友一起来交流

• QQ：771674109
• Vue交流群：338241465 —— 广州-小鑫

License

MIT

Copyright (c) 2017-present，uncleLian