vue和element-ui构建后台系统

前言

近来，前端大佬要求个人要针对公司的业务去想一个项目去提升下自己的技能，自己纠结了段时间，最后决定使用github的api并结合d3js来学习学习（毕竟前端还是偏向数据可视化的，后期项目中应该可以使用到，强行贴边针对公司的业务），别问我为什么不选择echart...

搭建项目过程

一、使用element-ui结合vuejs进行项目的搭建

1. 使用vue-cli进行搭建（当然你也可以一步一步搭建，我这里是省时间）
2. 引入element-ui 执行命令 npm install --save element-ui，更加详细的内容参考官网

二、图标我选择awesome-font

1. 这里的安装我直接是使用cdn在index.html文件中进行引用

【备注】1.通过npm安装的awesome-font打包后失效 2.element-ui提供的icon有限

三、使用axios

使用axios进行http的处理，为神马不选择vue-resource呢？看者到npm上面搜下就知道了...

四、使用less与处理器

你可以根据个人的使用爱好使用与处理器加速开发效率，个人习惯使用less

五、使用d3

我这里放弃了echart而选择d3，原因有二：

1. d3的定制性更高
2. 为了逼自己学英文，看d3官网

【备注】d3的引入方式有点特别import * as d3 from 'd3'

六、其他

我还使用了其他的一些包，比如：

• 处理时间的moment
• javascript的使用函数库lodash
• etc

目前效果

目前已经搭建好项目，并且完成了简单的登录，退出和调用github的api完善个人主页，附上gif图：

github-admin/demo20180504.gif

链接

代码仓库https://github.com/reng99/github-admin 求star咯

线上演示地址http://reng99.cc/github-admin/ 我这里默认使用自己的github名(reng99)登录，看者可以换成自己的github仓库名登录（密码不用改）

结尾

欢迎指正