Vue2+VueRouter2+webpack 构建项目实战（四）接通api，先渲染个列表

Vue2+VueRouter2+webpack 构建项目实战（四）接通api，先渲染个列表

目录索引

《Vue2+VueRouter2+webpack 构建项目实战（一）准备工作》

《Vue2+VueRouter2+webpack 构建项目实战（二）目录以及文件结构》

《Vue2+VueRouter2+webpack 构建项目实战（三）配置路由，整俩页面先》

《Vue2+VueRouter2+webpack 构建项目实战（四）接通api，先渲染个列表》

《Vue2+VueRouter2+webpack 构建项目实战（五）配置子路由》

《Vue2+VueRouter2+webpack 构建项目实战（六）修复代码并通过验证，另发布代码》

通过前面几篇教程，我们已经顺利搭建起来了，并且已经组建好路由了。本章节，我们需要做一个列表页面，然后利用获取 http://cnodejs.org/api 的公开API，渲染出来。

制作列表页面

我们打开src/page/index.vue文件，在这里写入下面的代码：

<template>
  <div>
    <h1 class="logo">cnodejs Api Test</h1>
    <ul class="list">
      <li v-for="item in lists" v-text="item.title"></li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      lists:[{
        id:1,
        title:"test title 1"
      },{
        id:2,
        title:"test title 2"
      }]
    }
  }
}
</script>
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

如上，我们通过自己写的两组数据，很轻松的将页面渲染成功了。通过浏览器，我们可以看到效果

配合点css

这里，我着重强调的不是css如何去写，而是我的组织项目的结构，我感觉我组织得还是很不错的。

新建文件， src/style/scss/_index.scss

输入下面的内容

.logo {color: red;}
.list {
  line-height: 2;
  li {border-bottom: 1px solid #ddd;}
}

 
1
2
3
4
5
6
 
1
2
3
4
5
6

然后在 src/style/style.scss中输入

@import "scss/index"; // 这里会报错。改成 @import "index";
 
1
 
1

然后，我们就可以在浏览器中，看到带样式的列表了。

我的习惯是，一个文件，一个样式，文件位于src/page/文件夹下面，样式位于src/style/scss下面。文件和样式同名。如果文件位于子目录，如src/page/user/pay.vue，那么，对应的scss文件就是src/style/scss/user/_pay.scss这样。

每一个团队的规范都是不一样的，都是各有所长的，重要的是，条理性。

调用api.js

在第二节中，我们在src/config目录下面建立了一个api.js的空文件。在第三节中没有使用。本节，我们要开始使用了。

首先，我们编辑 src/main.js ，引用 src/config/api.js。如下：

import api from './config/api'
Vue.prototype.$api = api
 
1
2
 
1
2

插入这两行代码，就引用好了api.js，并且，把它绑定到了全局，然后我们就可以在各种地方使用这个文件了。虽然这个文件是空的。

可能部分朋友不知道插入到文件的哪里去。我这里放上main.js的全部代码：

// 引用 vue 没什么要说的
import Vue from 'vue'
// 引用路由
import VueRouter from 'vue-router'
// 光引用不成，还得使用
Vue.use(VueRouter)
// 入口文件为 src/App.vue 文件 所以要引用
import App from './App.vue'
// 引用路由配置文件
import routes from './config/routes'
// 引用API文件
import api from './config/api'
// 将API方法绑定到全局
Vue.prototype.$api = api
// 使用配置文件规则
const router = new VueRouter({
  routes
})
// 跑起来吧
new Vue({
  router,
  el: '#app',
  render: (h) => h(App)
})
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

安装superagent组件

要请求接口，就必须有相对应的组件。如果你使用过jQuery，应该熟悉其中的AJAX方法。当然，在vue中，我们就不考虑使用jquery了。我们使用superagent这个组件。

安装非常简单，我们首先跳转到项目根目录，然后输入 npm install superagent -D进行安装。