28
GitHub - HongqingCao/GitDataV: 基于Vue框架构建的github数据可视化平台
source link: https://github.com/HongqingCao/GitDataV
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
README.md
GitDataV
GitDataV,是一个github“大数据可视化平台”,通过它你可以更直观的看到你在github里的一些数据:
个人信息(✔),仓库stars情况(✔),仓库语言分类(✔)
仓库公开数量(✔)、粉丝数量(✔)、跟随数量(✔)、仓库数据(✔)、最近你的操作(✔)
最近的粉丝(✔)、最近的跟随(✔)、最新信息(✔)
左上角箭头小彩蛋: 全屏(✔)、 国际化语言切换(✔)、返回首页(✔)、皮肤切换(开发中..)
(ps:在线演示为dev.1.0版本,更多功能,可切换dev.2.0或者master分支clone本地运行)
开发日志
构建和设置
# 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 # run unit tests npm run unit # run all tests npm test
项目目录结构
├── 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构建。
相关链接
技术点
- vue(vue项目构建、指令的灵活运用、组件封装、组件之间通信)
- vue-router(路由预备知识:hash和history区别、动态路由、路由切换传参)
- vuex、vue-i18n(语言切换)
- 网络请求axios(自己封装axios、跨域代理配置)
- 可视化工具echarts、v-charts处理图形(控制大小、布局、颜色、接受数据格式)
- es6(基础语法,比如在梳理数据过程中用到map遍历数组、对象和数组转换等等)
- scss(配置、语法)
- bootstrap、iconfont(用于没有设计师,作为前端设计能力有限,所以引用这两个)
License
MIT
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK