簡介

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，對初中級前端同學有所幫助，對于初中級前端同學同學來說是一個不錯的一個參考項目。

總結

以上是生活随笔為你收集整理的vue 可视化布局工具_GitDataV一款Github的'大数据可视化平台'的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。