Skip to content

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

License

Notifications You must be signed in to change notification settings

uncleLian/vue2-echo

Repository files navigation

vue2-echo

image image image image image

其他分支:
react版本

公告

由于echo官方暂停运营,目前所有图片、音频已失效‼️ 是个宝藏APP,可惜了~ 后面如果有时间会更换图片音频来源。

前言

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

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

技术栈

  1. vuevue-routervuex
  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端,难度:★★★★☆ 进阶项目,可跳过)
  • 第五阶段:vue-blog —— 后台管理集成解决方案( pc端管理后台,难度:★★★★★ 进阶项目,推荐 ⭐️⭐️⭐️️⭐️⭐️️️️)

效果演示

在线链接(请使用手机模式预览)

功能

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

项目截图

image

image

image

目录结构

├── src                          
│   ├── api                      // 请求api
│   ├── assets                   // 静态资源
│   ├── components               // 全局组件
│   ├── filters                  // 全局过滤
│   ├── mock                     // 模拟数据
│   ├── page                   
│   |   ├── detail               // 详情页
│   |   ├── index                // 首页
│   ├── router                   // 路由
│   ├── store                    // 状态管理
│   ├── utils                    // 公用方法
│   ├── App.vue
│   └── main.js
├── .env.development             // 开发环境变量
├── .env.production              // 生产环境变量
├── package.json                 // 项目依赖
└── vue.config.js                // vue-cli 3.0配置

开发和发布

# 安装依赖
npm install

# 启动项目:localhost:8001
npm run dev

# 打包项目
npm run build

# 查看构建报告:/dist/report.html
npm run build:report

更新日志

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

交流

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

  • Vue交流群:338241465

License

MIT

Copyright (c) 2017-present,uncleLian