从零开始搭建自己的VueJS2.0+ElementUI单页面网站（二、编写导航页）

前言

在从零开始搭建自己的VueJS2.0+ElementUI单页面网站（一、环境搭建）一文中我们已经配置好了开发所需要的各种环境，在这一篇博文中我们正式进入开发。对于一个单页面应用来说，导航页是至关重要的一个页面，所有的组件都会在这个页面里进行显示。接下来我们就开始进行导航页的开发。

正文

创建导航页组件

我们在src目录下新建一个文件夹，名为components，今后我们的组件都会放在这个文件夹中。在components目录下新建一个Navi目录，在Navi目录中新建一个名为Navi.vue的组件。至此我们的目录应该是如下图所示：

然后我们修改main.js文件，修改后的文件如下

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
import Navi from './components/Navi/Navi.vue'

Vue.use(ElementUI)

new Vue({
  el: '#app',
  render: h => h(Navi)
})

我们可以看到render函数的参数由之前的App变为我们新创建的Navi组件。从此我们的程序入口中显示的就是这个Navi.vue里面的内容。之前默认生成的App.vue文件已经无用，我们可以删掉它。
接下来我们对导航页进行简单的布局，我们先来看一下布局的代码
Navi.vue

<template>
    <div style="background-color: #EBEBEB;min-height:800px">
        <div style="width:100%;background-color: #636363; overflow: hidden">
            <span class="demonstration" style="float:left;padding-top:10px;color:white;margin-left:1%">
                网站首页
            </span>
            <span class="demonstration" style="float:left;padding:5px;color:white;margin-left:2%;width:15%">
                <el-input
                        placeholder="请输入"
                        icon="search"
                        v-model="searchCriteria"
                        :on-icon-click="handleIconClick">
                </el-input>
            </span>
            <span class="demonstration" style="float:right;padding-top:10px;margin-right:1%">
                <el-dropdown trigger="click">
                  <span class="el-dropdown-link" style="color:white">
                    admin<i class="el-icon-caret-bottom el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>个人信息</el-dropdown-item>
                    <el-dropdown-item>退出登录</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
            </span>
        </div>

        <div style="margin-top:5px">
            <el-row