VUE 爬坑之旅-- 从零开始一步一步构建 VUE 单页应用（三）

从零开始一步一步构建 VUE 单页应用（一）
从零开始一步一步构建 VUE 单页应用（二）

前二篇介绍了如何创建一个基础的单页应用模版，以及简单分析了下整个模版项目，通过分析之后知道后面的工作应该从哪入手开始。

在上一篇中，我们简单的生成了一个 Home 页面，在实际项目中当然不会这么简单，实际项目中，一个首页会有很多内容，比如说比较常见的顶部一个 banner，然后是一个九宫格导航，然后可能还有一个列表，底部还有一个导航。

比如说上图中那样的，那我们怎么用 Vue 去做呢？我们慢慢来，先做一个简单的。

分析

做之前先要做下需求分析：
1. 底部导航栏应该是整个应用公用的，所以需要单独写成一个组件。然后要放在主容器里面，让整个应用共用。
2. 顶部 banner 也应该是一个组件，因为有很多页面都可能会要用到 banner，因为不是每个页面都会有，所以应该是在需要 banner 的路由里面才写。
3. 九宫格导航，这块一般也就首页会有，可以单独写成一个组件，在首页路由里面调用，也可以直接写在首页里面。推荐写成组件，毕竟单页应用的核心思想就是组件化，模块化。

实现

分析完了就可以开工了，按照上面的分析一步步来。

底部导航

首先在 components 文件夹下新建一个 vue 文件，BottomNav.vue

<template>
  <div id="bottomNav">
    <div class="tab">首页</div>
    <div class="tab">我的</div>
  </div>
</template>

<script>

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  #bottomNav {
    display: flex;
    width: 100%;
    height: 3rem;
    line-height: 3rem;
    padding: 0.5rem 0;
    text-align: center;
    border-top: 1px solid #999999;
    position: fixed;
    left: 0;
    bottom: 0;
  }

  .tab {
    flex: 1;
    text-align: center;
    border-right: 1px solid #999999;
  }
</style>

写好之后，按照上面的分析，这个组件是全应用共享的，所以要放在主容器里面，也就是 App.vue 文件里面。改造之后的 App.vue 如下：

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view></router-view>
    <!--3，将组件写入页面-->
    <BottomNav></BottomNav>
  </div>
</template>

<script>
  //1,导入组件
  import BottomNav from './components/BottomNav.vue'
export default {
  name: 'app',
  //2,注册组件
  components:{
    BottomNav
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

里面要做的就三件事，都写了注释，熟练的话不用按顺序来，但是这三件事情都是必须要做的。

特别注意

这里有一点需要注意，在第一步导入组件的时候

import BottomNav from './components/BottomNav.vue'

这句代码，后面的字符串是我们要导入的组件在项目中的路径，这个路径如果写错的话会报错，vue 表示找不到这个组件。

出现这个错误的话就仔细检查下，引入组件的路径是否正确。（这个问题可是坑了我很久。照着别人的教程做，老是报错，又找不到原因，后来才发现是路径问题，这里面的路径和传统 Html 中的引入资源路径是有点区别的，具体的我也说不清，，，）

写好了后就在命令行中进入 app 文件夹，npm run dev 回车运行看效果，如图：

上面算是比较详细的记载了如何自己写一个组件并将其显示到页面上，以及我在实践中遇到的一个坑（这个坑在其他人的各种教程里面可都没有说到，，，）。有了这个开端，后面的就可以照葫芦画瓢的去实现自己的静态页面了。