vue最简单的入门教程+实战+Vue2+VueRouter2+webpack（四）

vue入门之路篇系列教程：
vue最简单的入门教程+实战+Vue2+VueRouter2+webpack（一）
vue最简单的入门教程+实战+Vue2+VueRouter2+webpack（二）
vue最简单的入门教程+实战+Vue2+VueRouter2+webpack（三）
vue最简单的入门教程+实战+Vue2+VueRouter2+webpack（四）
vue最简单的入门教程+实战+Vue2+VueRouter2+webpack（五）

前言

通过前面几篇教程，我们已经顺利搭建起来了项目，并且已经组建好路由了，安装了我们需要的sass的模板。本章节，我们需要做一个列表页面，为了方便起见，决定使用获取 http://cnodejs.org/api 的公开API，渲染出来。

nodejs的公开API解读

进入我放置的连接后，看到的如图：

我们决定采用主题首页，其实我们在刚进入这个页面时会有不知道这是什么意思的疑问，比如这里写以下 api 路径均以 https://cnodejs.org/api/v1 为前缀，靠，这是什么？主题—get /topics 主题首页这又是什么意思？

如果你再点开示例：/api/v1/topics:

靠，这又是什么？

其实我在刚刚入VUE时，他们只是告诉我：去自己用nodejs的公开API渲染一个页面，这是nodejs的公开API地址。没人告诉我这个是个什么东西，只是说你自己去看吧！（然后我就傻不拉几的一边呆着去了）看到这个满是疑问。

对于不了解通过数据渲染页面的同学来说，简直不能理解，但是坑总是有人爬出来的，然后告诉你们这里有坑请注意（我是不是很高大上？），在这里讲害怕大家不能理解，我就简单提提，在把准备工作做完我会进行详细的讲解，这里说以下 api 路径均以 https://cnodejs.org/api/v1 为前缀意思是：你请求nodeAPI上的页面时所有的请求地址最前面是https://cnodejs.org/api/v1东西。

假设你要请求主题首页，你看他写的get /topics 主题首页，你就发送get请求，请求的地址是https://cnodejs.org/api/v1/topics，这样你就把有关主题首页的数据就请求过来了。

到这大家应该大概明白了这个页面想表达的意思，如果还不明白，那你就继续往下看，结合后面的内容进行相应的思考。

##制作列表页面

对nodejs的公开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>

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

在这里如果你看不懂没关系，你可以现在去官网了解了解一些简单的东西，比如模板语法，条件渲染，列表渲染等，你先灌灌耳音，这个方便你对后面的代码的理解。当然如果你有足够的耐心，你可以等待到我出对初始项目的解说也可以（但是这就得看我的心情了）

既然出来了，得配合点css

如果你不想看有关css的你可以调到下一个标题，也不会错过什么，只是错过了VUE怎么引用css（随便啦）

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

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

代码走起：

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

然后在src/style/style.scss中引用新建的，输入

@import "scss/index";

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

我的习惯是，一个文件，一个样式，文件位于src/page/文件夹下面，样式位于src/style/scss下面。文件和样式同名。如果文件位于子目录，如src