Vue做一个GitHub项目排行榜

GitHub不同语言热门项目排行，Vue做页面展示。

源代码

源代码地址：🔗 GitHub
欢迎大家 star和fork😄

预览地址

在线效果预览地址：https://microzz.com/github-ranking/

技术栈

Vue2.0：前端页面展示。
axios：一个基于 Promise 的 HTTP 库，向后端发起请求。
Express、Koa2：因为vue-cli生成的项目是基于express的，所以在开发阶段我使用的是它，但是真正上线生产环境我换成了Koa2。
request、request-promise：没有用Node.js原生的http/https模块是因为不喜欢回调函数式的异步，可读性和可维护性很差。所以选择了request+request-promise，让异步更为优雅一点。
cheerio：服务器特别定制的，快速、灵活、实施的jQuery核心实现，抓取页面内容很方便。
SASS(SCSS)：用SCSS做CSS预处理语言，有些地方很方便，个人很喜欢用。(详看👉SASS用法指南)
ES6、ES7：采用ES6语法，这是以后的趋势。自己上线的生产环境后端增加了Async/await，使异步更加优雅。
Webpack：vue-cli自带Webpack，但是需要自己改造一下，比如要对 build/dev-server.js扩展express，增加后端请求路由(上线版本用的是Koa2)。此外需要安装sass相关loader，vue-cli已经配置好了webpack，你只需要安装依赖就可以，使用的时候只需要<style lang="scss"></style>。
flex：flex弹性布局。
CSS3：CSS3过渡动画及样式。

遇到的问题

429 Too Many Requests (太多请求)
当你需要限制客户端请求某个服务的数量，也就是限制请求速度时，该状态码就会非常有用。在此之前，有一些类似的状态码。例如“509 Bandwidth Limit Exceeded”。

所以一定好处理好这些异步请求，不然就爬取不到信息缓存了。

About

源代码地址：👉 GitHub

个人网站：🔗 https://microzz.com/

GitHub：🔗https://github.com/microzz

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report