加入CODE CHINA

· 不限速    · 不限空间    · 不限人数    · 私仓免费

免费加入
    README.md

    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

    项目简介

    🚀 Github 镜像仓库 🚀

    源项目地址

    https://github.com/unclelian/vue2-echo

    发行版本 5

    v3.2.0

    全部发行版

    贡献者 1

    U uncleLian @uncleLian

    开发语言

    • JavaScript 87.0 %
    • Vue 10.3 %
    • CSS 2.3 %
    • HTML 0.5 %