GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → uncleLian → Vue2 Echo

uncleLian / Vue2 Echo

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

Programming Languages

javascript
184084 projects - #8 most used programming language

Labels

vuewebpackmusicvuexvue-routerspavue-cliecho

Projects that are alternatives of or similar to Vue2 Echo

Vue2 News
基于vue2 + vue-router + vuex 构建的一个新闻类单页面应用 —— 今日头条（移动端）
Stars: ✭ 462 (+13.24%)
Mutual labels:  webpack, vue-cli, vuex, vue-router, spa
Vue Todos
vue最新实战项目教程，从零开始，一步一个脚印,循序渐进。跟着我一起学习vue吧！
Stars: ✭ 1,659 (+306.62%)
Mutual labels:  webpack, vue-cli, vuex, vue-router
Vue Home
🏠 A simple project(Vue Community SPA) which bases on vue+vue-cli+vue-router+axios+ scss.
Stars: ✭ 256 (-37.25%)
Mutual labels:  webpack, vue-cli, vuex, vue-router
Eleme
restructure..
Stars: ✭ 1,635 (+300.74%)
Mutual labels:  webpack, vue-cli, vuex, vue-router
Vue Meizi
vue最新实战项目，vue2 + vuex + webpack + es6 干货多多，新手福利
Stars: ✭ 1,476 (+261.76%)
Mutual labels:  webpack, vue-cli, vuex, vue-router
Vue Spa Project
vue.js + vuex + vue-router + fetch + element-ui + es6 + webpack + mock 纯前端SPA项目开发实践
Stars: ✭ 118 (-71.08%)
Mutual labels:  webpack, vuex, vue-router, spa
Vue Admin Design
基于vue + elementUI的管理系统模板
Stars: ✭ 279 (-31.62%)
Mutual labels:  webpack, vue-cli, vuex, vue-router
Manhuaren
vue2.0全家桶，仿漫画人官网（移动端）
Stars: ✭ 18 (-95.59%)
Mutual labels:  webpack, vue-cli, vuex, vue-router
Awesome Vue Cli3 Example
🦅 Awesome example for rapid Vue.js development using vue-cli3 .
Stars: ✭ 160 (-60.78%)
Mutual labels:  webpack, vue-cli, vuex, vue-router
Space Snake
A Desktop game built with Electron and Vue.js.
Stars: ✭ 289 (-29.17%)
Mutual labels:  webpack, vue-cli, vuex, vue-router
Vue2 Demo
Vue 基于 Genesis + TS + Vuex 实现的 SSR demo
Stars: ✭ 2,072 (+407.84%)
Mutual labels:  webpack, vue-cli, vuex, vue-router
Xyy Vue
🎨基于vue+vue-router+vuex+axios+webpack开发的个人Demo《Qu约》
Stars: ✭ 1,316 (+222.55%)
Mutual labels:  webpack, vue-cli, vuex, vue-router
Egg Vue Webpack Boilerplate
Egg Vue Server Side Render (SSR) / Client Side Render (CSR)
Stars: ✭ 1,302 (+219.12%)
Mutual labels:  webpack, vue-cli, vuex, vue-router
Todolist Frontend Vuejs
Front-end application for Todolist Web application built with Laravel and Vue.js
Stars: ✭ 120 (-70.59%)
Mutual labels:  webpack, vuex, vue-router, spa
Vue Spa
vue-spa ： vue + vue-router + axios + vuex + vux 快速成型移动端项目，直接使用。欢迎star
Stars: ✭ 46 (-88.73%)
Mutual labels:  webpack, vuex, vue-router, spa
Vue2 Manage
基于 vue + element-ui 的后台管理系统
Stars: ✭ 11,345 (+2680.64%)
Mutual labels:  webpack, vue-cli, vuex, vue-router
Blog
一个go、echo、vue 开发的快速、简洁、美观、前后端分离的个人博客系统(blog)、也可方便二次开发为CMS(内容管理系统)和各种企业门户网站
Stars: ✭ 388 (-4.9%)
Mutual labels:  echo, vue-cli, vuex, spa
Dashboard
A dashboard scaffolding based on Vue.js 3.0 created by Vite.
Stars: ✭ 497 (+21.81%)
Mutual labels:  webpack, vue-cli, vuex, vue-router
Vue Admin Webapp
this is a admin project
Stars: ✭ 673 (+64.95%)
Mutual labels:  webpack, vue-cli, vuex, vue-router
Vue Cli Multi Page
基于vue-cli模板的多页面多路由项目，一个PC端页面入口，一个移动端页面入口，且有各自的路由， vue+webpack+vue-router+vuex+mock+axios
Stars: ✭ 145 (-64.46%)
Mutual labels:  webpack, vue-cli, vuex, vue-router
View All Similar Projects ➔

vue2-echo

image image image image image

其他分支：
react版本

公告

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

前言

这是一个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端，难度：★★★★☆ 进阶项目，可跳过）
  • 第五阶段：vue-blog —— 后台管理集成解决方案（ pc端管理后台，难度：★★★★★ 进阶项目，推荐 ⭐️⭐️⭐️️⭐️⭐️️️️）

效果演示

在线链接（请使用手机模式预览）

功能

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

项目截图

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].