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进行安装。