簡介

GitDataV基於Vue框架構建的github資料視覺化平臺,是一個github“大資料視覺化平臺”，通過它你可以更直觀的看到你在github裡的一些資料：個人資訊(✔)，倉庫stars情況(✔)，倉庫語言分類(✔)倉庫公開數量(✔)、粉絲數量(✔)、跟隨數量(✔)、倉庫資料(✔)、最近你的操作(✔)最近的粉絲(✔)、最近的跟隨(✔)、最新資訊(✔)左上角箭頭小彩蛋： 全屏(✔)、 國際化語言切換（✔）、返回首頁（✔）

github 地址：

https://github.com/HongqingCao/GitDataV

github star: 919+

最新版本：2.1.0，MIT 協議

主要技術棧:

vue（vue專案構建、指令的靈活運用、元件封裝、元件之間通訊）vue-router(路由預備知識：hash和history區別、動態路由、路由切換傳參)vuex、vue-i18n(語言切換)網路請求axios(自己封裝axios、跨域代理配置)視覺化工具echarts、v-charts處理圖形（控制大小、佈局、顏色、接受資料格式）es6（基礎語法，比如在梳理資料過程中用到map遍歷陣列、物件和陣列轉換等等）scss(配置、語法)bootstrap、iconfont專案截圖

專案目錄結構

├── README.md                 專案介紹├── vue.config.js             專案配置├── deploy.sh                 部署檔案├── package.json              npm包配置檔案，裡面定義了專案的npm指令碼，依賴包等資訊├── src                       原始碼目錄  │  ├── main.js                入口js檔案│  ├── router.js              路由│  ├── store.js               vuex狀態│  ├── app.vue                根元件│  ├── components             公共元件目錄│  │  └── index.js            把全部元件遍歷出來│  ├── lang                   語言切換字典│  │  └── index.js            語言切換字典│  ├── assets                 資源目錄，這裡的資源會被wabpack構建│  │  └── css                 css基礎重置│  │  └── data                視覺化介面需要的圖片│  │  └── iconfont            字型圖示│  │    └── bg.png│  └── views                  頁面目錄│    ├── app                  入口檔案│    └── data                 視覺化檔案├── static                    純靜態資源，不會被wabpack構建。

快速上手

git clone https://github.com/HongqingCao/GitDataV.git cd GitDataV# 安裝依賴npm install# 啟動本地開發環境（localhost:8080）npm run dev# 編譯npm run build# 執行測試npm test

瀏覽器相容性IE / Edge

開源專案未提供

Firefox

開源專案未提供

Chrome

開源專案未提供

Safari

開源專案未提供

Opera

開源專案未提供

PS

這個開源專案利用github網站提供了開發者API，地址傳送門：(https://developer.github.com/v3/)，基於vuejs，對初中級前端同學有所幫助，對於初中級前端同學同學來說是一個不錯的一個參考專案。