Giter VIP home page Giter VIP logo

vue2-echo's Introduction

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

vue2-echo's People

Contributors

unclelian avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

vue2-echo's Issues

运行项目报错

$ npm run dev

[email protected] dev E:\myspace\vue-test\webpack-vue\vue2-echo
vue-cli-service serve

E:\myspace\vue-test\webpack-vue\vue2-echo\node_modules\read-pkg\index.js:13
...options
^^^

SyntaxError: Unexpected token ...
at createScript (vm.js:74:10)
at Object.runInThisContext (vm.js:116:10)
at Module._compile (module.js:533:28)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:503:32)
at tryModuleLoad (module.js:466:12)
at Function.Module._load (module.js:458:3)
at Module.require (module.js:513:17)
at require (internal/module.js:11:18)
at Object. (E:\myspace\vue-test\webpack-vue\vue2-echo\node_modules@vue\cli-service\lib\Service.js:5:17)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: vue-cli-service serve
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\16393\AppData\Roaming\npm-cache_logs\2019-05-07T04_45_20_804Z-debug.log

安装依赖错误

大神我下载了你的项目带本机,安装依赖出现一些问题:

npm WARN tar zlib error: unexpected end of file
npm ERR! cb() never called!

npm ERR! This is an error with npm itself. Please report this error at:
npm ERR! https://github.com/npm/npm/issues

不明白是怎么回事,是因为npm版本不同的关系吗?

手机显示空白页

vivo手机安卓版本4.4.2显示空白页,在别的手机安卓版本6.0.1显示正常,这个怎么解决?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.