github搜索

静态组件

先拆分，有两个组件，一个是Search，另一个是List

 把静态页面拆分到组件中

注意的一点，这个案例是用bootstrap框架导入进入的

可以把需要的资源放到assents里面，然后在文件中import 引入

但是不建议这么使用，因为有时在引入bootstrap，需要对应的字体，而我们是没有的，就会报错

还有一种方式就是把文件放到public文件中

然在页面中进入引入，这样就没有问题了

 拆分组件

 

列表展示

经过分析把数据给List组件进行保管

接口地址https://api.github.com/search/users?q=xxx

 

 使用全局事件总线

 存数据

 

 我们需要这三个数据，修改结构

 

 完善案例 

 List组件有4种展示：1，页面当载入时的welcome 2.页面加载时的loading 3.页面加载成功的users

4.加载失败的error

通过4个数据，驱动页面的展示

 

 效果

Vue-resource

 Vue-resource是vue中一个网络请求的插件库

那么就要通过Vue.use(xxx)去使用这个插件

它是对xhr的封装，以前在vue1.0的时候很多，现在还是要了解

 npm i vue-resource安装这个库

引入插件 import vueResource from 'vue-resource'

 Vue.use(vueResource) 使用插件

全局配置了插件，那么无论是在vc，还是在vm上都多了个$http 

这个库的用法跟axios用法很像，也就是将axios替代成了this.$http

现在这个维护比较旧，了解即可，反正axios使用的更加优秀