vue摸板 大数据_用Vue构建一个github“可视化大数据平台”-GitDataV，设计开发分享...

写在前面

GitDataV，是一个github“大数据可视化平台”，通过它你可以更直观的看到你在github里的一些数据，(之所以打双引号，是因为我觉得这个还没到大数据可视化的程度)。其实我在 上篇文章 分享的时候已经提到了这个想法，通过github提供的接口，做一个自己的“大数据分析页面”，所以我就花了几天晚上的时间，把这想法从设计到开发构建出来了，那么下面我就我个人的账号测试看看效果如下

如果您感兴趣可以点击这里访问简单的：GitDataV网站 (目前打包后有些小bug，但不影响正常使用) ，看看你的github“大数据分析”详情。

推荐把GitDataV(github源码)项目下载下来，在本机运行项目，在本机浏览器打开网页，生成自己的“大数据分析”详情。

通过它你将看到你在github里的这些数据：个人信息(✔)，仓库stars情况(✔)，仓库语言分类(✔)仓库公开数量(✔)、粉丝数量(✔)、跟随数量(✔)、仓库数据(✔)、最近你的操作(✔)、最近的粉丝(✔)、最近的跟随(✔)、最新信息(✔)，左上角箭头小彩蛋： 全屏(✔)、 国际化语言切换(开发中...)、皮肤切换(开发中..)

看着还不错吧(没有设计师，自己作为前端设计，审美[chou]就这样)，有点小感(la)觉(ji)。下面步入正题，我将从下面几点：需求分析、开发准备、功能设计和代码实现，对我独立从设计到开发构建这个“可视化大数据平台”小玩意做个分享：

需求分析

信息数据时代，每个人对数据都是敏感的，对于你在github的数据，你除了看到github官方网站给你的数据之外，其实你还可以看到更多的数据。我当时的初心就是通过用户输入自己的github账号，可以获取自己在github里有用的数据。在上次做门户网站在前端页面交互应用和小技巧的时候偶然发现原来github提供了开发者API，地址传送门：(https://developer.github.com/...

点进一看发现新大陆，欣喜若狂的我感觉有了一个心血来潮，自己的想法还是自己实现吧，开搞！

开发准备

一、了解GitHub开发者文档

v3版API的文档链接、v3版API的官方教程

先看看github接口都能获取什么数据吧，先做个简单的测试我通过我自己的账号(hongqingcao)去请求/users接口(https://api.github.com/users/...)得到下面的数据，哇哇。从上往下看，真全面，连我都忘记自己GitHub注册时间，这里都有

当然你如果懒得去学习官方文档，网上一搜还真有人总结了Github API调用，传送门《一篇文章搞定Github API 调用 (v3)》

二、了解可视化相关的设计

首先进入百度了解了一哈，乍一眼看，基本上都是偏深蓝色调，当然不仅仅如此《大数据数据可视化的设计原则》，我也是有看的，具体资料有兴趣的同学可以自行研究。

阿里的DataV数据可视化是比较6的，自信到百度查出来的都是“双十一大屏展示”卖点啊(多次提到百度，阿里，哈哈)

看完这些，说实话心里对数据可视化的设计就有个谱了，没有设计师，前端一样可以好好玩耍。在这里声明一哈：整个项目背景图来自17素材网等网上平台(不用于商业用途)。

三、技术选型、知识准备

既然上篇文章被各路“扛精”，那我就继续用Vue来搞事情，这里想了一哈整个项目(回忆了功能)，梳理列了下面几项技术栈和知识点：

1、vue(vue项目构建、指令的灵活运用、组件封装、组件之间通信)

2、vue-router(路由预备知识：hash和hist