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

进行安装。