从零开始搭建自己的博客 三：建立主页和个人介绍页

那么这里，我们就开始建立主页和个人介绍页，好的主页和个人介绍页可以给人留下好的第一印象所以我们随便搞搞就行了要认真做主页和个人介绍页，说不定还能在找工作时给你加分呢！

主页

我们先做主页。那么主页要放哪呢？我们需要在项目根目录下建一个 pages 目录，然后在 pages 目录里面创建 index.vue 文件，这个文件里面放上主页的内容就行了。

我们先填一些占位的东西，之后再丰富里面的内容。

<!-- @/pages/index.vue -->
<template>
    这里是主页
</template>

创建并填写完内容后，我们来到主页（就是路径为 /，即根路径页面），发现哪里也没变啊，是哪里出了问题？

回顾上一篇文章里的默认布局文件 @/layouts/default.vue 的内容：

<!-- @/layouts/default.vue -->
<template>
  <div id="main">
    <!-- 导航栏 -->
    <nav>
      <p>contents of nav</p>
    </nav>

    <!-- 页面主内容 -->
    <main>
      <p> contents of main</p>
    </main>

    <!-- 页脚 -->
    <footer>
      <p>This blog is supported by Nuxt</p> 
    </footer>
  </div>
</template>

我们会发现页面主内容是写死的，永远只会显示 <p>contents of main</p>，我们修改一下里面的内容，把 <main /> 元素里的内容换成 <slot />：

<template>
  <div id="main">
    <!-- 导航栏 -->
    <nav>
      <p>contents of nav</p>
    </nav>

    <!-- 页面主内容 -->
    <main>
      <!-- <p> contents of main</p> -->
      <slot />
    </main>

    <!-- 页脚 -->
    <footer>
      <p>This blog is supported by Nuxt</p> 
    </footer>
  </div>
</template>

这样，来到主页，就会发现主页内容按我们的预期出现了。而且我们主页代码里并没有页头页脚相关代码，但是页头页脚也出现在了主页，这就是之前写的默认布局起作用了。之后所有页面，只要没有特殊指定，都会用到这个默认布局。

个人介绍页

之后，我们再制作个人介绍页。个人介绍页同样是放 pages 目录里面。我们在 pages 目录里面创建 about.vue 文件，在文件里面先填充以下内容（后续再丰富个人介绍）：

    这里是个人介绍页

创建并编辑完成后，就可以进入个人介绍页检查成果。那么问题来了，个人介绍页的网址路径是什么呢？答案其实就藏在我们创建的页面的文件的名字中。Nuxt.js，还有其他一些主流前端框架，都支持文件系统路由。也就是页面路径和项目文件夹路径相对应。就比如 about.vue 文件在 pages 目录里面，那么就打开 http://localhost:3000/about 就可以看到自己创建的个人介绍页了。

我们看到，个人介绍页里面，默认布局也起到了作用。

但是，之前的主页文件明明是 index.vue，按理说对应的页面应该在 http://localhost:3000/about 才对啊？为什么对应的是网页根路径呢？这个就是特殊规定了。在 nuxt.js 里想创建主页，就是要创建 index.vue，不然如果名字叫 /.vue 的话，一些文件系统会不支持。