microzz / Github Ranking
🔍GitHub不同语言热门项目排行,Vue.js做页面展示
Stars: ✭ 160
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Github Ranking
Vue Cnode
🔥Vue.js打造一个开源的CNode社区。CNode by Vue.js
Stars: ✭ 249 (+55.63%)
Mutual labels: webpack, axios, html5, vuejs2, vue2, css3
Vue Qq
🎨 Vue family bucket with socket.io and express/koa2 , create a web version of mobile QQ, supporting real-time group chat, real-time private chat, special care, shielding chat, smart IP geographic location, real-time display temperature and other QQ core functions
Stars: ✭ 861 (+438.13%)
Mutual labels: express, koa2, axios, html5, vue2, css3
Vue Music Player
🎵Vue.js写一个音乐播放器+📖One(一个).A music player + One by Vue.js
Stars: ✭ 729 (+355.63%)
Mutual labels: webpack, axios, html5, vuejs2, vue2, css3
Vue2 blog
使用vue2.x + vue-cli +vue-router+ vuex + axios + mysql + express + pm2 + webpack+nginx构建的具有登录,注册,留言,用户发帖,用户评论等功能的SPA Blog。注意,注意,注意,后端API全部自己手写,很适合刚学习vue以及express的小伙伴学习,喜欢请Star鼓励一下我,谢谢!项目预览:
Stars: ✭ 417 (+160.63%)
Mutual labels: webpack, vue-cli, express, axios, vue2
Vue Chat
👥Vue全家桶+Socket.io+Express/Koa2打造一个智能聊天室。
Stars: ✭ 887 (+454.38%)
Mutual labels: express, koa, koa2, vuejs2, vue2
Vue Home
🏠 A simple project(Vue Community SPA) which bases on vue+vue-cli+vue-router+axios+ scss.
Stars: ✭ 256 (+60%)
Mutual labels: webpack, vue-cli, axios, vuejs2, vue2
Vue2 Demo
Vue 基于 Genesis + TS + Vuex 实现的 SSR demo
Stars: ✭ 2,072 (+1195%)
Mutual labels: webpack, vue-cli, vuejs2, vue2
Nx Admin
👍 A magical 🐮 ⚔ vue admin,记得star
Stars: ✭ 2,497 (+1460.63%)
Mutual labels: webpack, vue-cli, axios, vuejs2
Vue Shiyanlou
😘基于vue2和vuex的复杂单页面应用,20+页面53个API(仿实验楼)✨✨
Stars: ✭ 342 (+113.75%)
Mutual labels: webpack, html5, vue2, css3
Dashboard
A dashboard scaffolding based on Vue.js 3.0 created by Vite.
Stars: ✭ 497 (+210.63%)
Mutual labels: webpack, vue-cli, vuejs2, vue2
Spring Boot Vuejs
Example project showing how to build a Spring Boot App providing a GUI with Vue.js
Stars: ✭ 1,818 (+1036.25%)
Mutual labels: webpack, vue-cli, axios, vuejs2
Vue Webpack Config
Koa2、Webpack、Vue、React、Node
Stars: ✭ 151 (-5.62%)
Mutual labels: webpack, koa, koa2, axios
Vue Meizi
vue最新实战项目,vue2 + vuex + webpack + es6 干货多多,新手福利
Stars: ✭ 1,476 (+822.5%)
Mutual labels: webpack, vue-cli, html5, css3
Vue Cli Multi Page
基于vue-cli模板的多页面多路由项目,一个PC端页面入口,一个移动端页面入口,且有各自的路由, vue+webpack+vue-router+vuex+mock+axios
Stars: ✭ 145 (-9.37%)
Mutual labels: webpack, vue-cli, axios, vue2
Vue2 Shop
A shop developed with Vue2 + Vue-router + Axios + Vuex + Node + Express + MongoDB + Webpack
Stars: ✭ 103 (-35.62%)
Mutual labels: express, axios, vue2
Vlackjack
Blackjack built with Vue.js and vuex
Stars: ✭ 109 (-31.87%)
Mutual labels: webpack, html5, css3
Postgraphile
GraphQL is a new way of communicating with your server. It eliminates the problems of over- and under-fetching, incorporates strong data types, has built-in introspection, documentation and deprecation capabilities, and is implemented in many programming languages. This all leads to gloriously low-latency user experiences, better developer experiences, and much increased productivity. Because of all this, GraphQL is typically used as a replacement for (or companion to) RESTful API services.
Stars: ✭ 10,967 (+6754.38%)
Mutual labels: express, koa, koa2
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过渡动画及样式。
遇到的问题
- 异步操作很容易出问题,异步处理一定要小心!要熟练掌握
Promise
、Async/await
、Generator
等方法。(详看👉异步操作和Async函数、Promise对象、Generator 函数) - 因为访问每次爬取GitHub速度慢,性能差,所以建议使用缓存,把爬取到的数据保存为json文件或者其他缓存方式,我在上线的正式版是保存为json文件。那么这个时候就要有一个定时爬取的工具了,这里推荐node-schedule模块,很方便就能实现定时任务,查看官方文档就能简单上手了。上线版本我是每隔几个小时就爬取一次,然后保存数据,这样减轻了服务器压力,前端访问速度也大大加快。
- GitHub貌似最多只能有10个并发,我尝试9个是正常的,10个就会报错,刚好我一次性爬取的语言数目超过数目,一看报错信息是429状态码。查信息发现:
429 Too Many Requests (太多请求) 当你需要限制客户端请求某个服务的数量,也就是限制请求速度时,该状态码就会非常有用。在此之前,有一些类似的状态码。例如“509 Bandwidth Limit Exceeded”。
所以一定好处理好这些异步请求,不然就爬取不到信息缓存了。
GitHub
About源代码地址:👉个人网站:🔗microzz-IT技术分享 GitHub:🔗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
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].