前言
在从零开始搭建自己的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