简单学习了几天的Vue相关知识，根据自己的需求设计了一个导航栏。在这里做一个简单的记录~~~
新建项目相关的知识，可参考前一篇博客。
先来一张效果图：
准备工作:
1.新建一个工程，然后用VScode软件打开
2.在工程src目录下的components目录下,新建一个导航栏文件，navigation_bar.vue,然后添加以下内容到该文件；
<template>
<div style="background-color: #EBEBEB;height:800px">
<div style="width:100%;background-color: #409EFF; height:7%">
<span class="demonstration" style="float:left;padding-top:16px;color:white;margin-left:50%">
网站首页
</span>
<span class="demonstration" style="float:right;padding-top:16px;margin-right:1%">
<el-dropdown trigger="click">
<span class="el-dropdown-link" style="color:white">
吴小白<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="background-color: #EBEBEB;margin-top:5px">
<el-row :gutter="10" >
<el-col :xs="4" :sm="4" :md="4" :lg="4">
<div >
<el-menu default-active="1" class="el-menu-vertical-demo" style="min-height:800px" @select="handleSelect"
background-color="#545c64"
text-color="#fff"
active-text-color="#409EFF">
<!-- 一个导航栏下面有子导航栏 -->
<el-submenu index="1">
<template slot="title">
<i class="el-icon-monitor"></i>
<span slot="title">智能设备</span>
</template>
<el-menu-item-group>
<el-menu-item index="1-1" >
<i class="el-icon-menu"></i>
<span slot="title">设备列表</span>
</el-menu-item>
<el-menu-item index="1-2">
<i class="el-icon-chat-dot-square"></i>
<span slot="title">设备对话</span>
</el-menu-item>
<el-menu-item index="1-3">
<i class="el-icon-circle-plus-outline"> </i>
<span slot="title">添加设备</span>
</el-menu-item>
</el-menu-item-group>
<!-- 在子菜单中再建立一个子菜单 -->
<!-- <el-submenu index="1-4">
<span slot="title">选项4</span>
<el-menu-item index="1-4-1">选项1</el-menu-item>
</el-submenu> -->
</el-submenu>
<!-- 下面是单个导航栏 -->
<el-menu-item index="2">
<i class="el-icon-data-analysis"></i>
<span slot="title">设备数据</span>
</el-menu-item>
<el-menu-item index="3">
<i class="el-icon-location"></i>
<span slot="title">位置查询</span>
</el-menu-item>
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<span slot="title">系统设置</span>
</el-menu-item>
</el-menu>
</div>
</el-col>
<!-- 内容 -->
<el-col :xs="20" :sm="20" :md="20" :lg="20">
<div style="margin-top:10px">
<router-view></router-view>
</div>
</el-col>
</el-row>
</div>
</div>
</template>
<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
width: 200px;
min-height: 400px;
}
</style>
<script type="text/ecmascript-6">
export default {
data(){
return {
searchCriteria: '',
}
},
methods:{
handleIconClick(ev) {
console.log(ev);
},
handleSelect(key, keyPath){
switch(key){
case '1':
this.$router.push('/Page1');
break;
case '1-1':
this.$router.push('/Page1_1');
break;
case '1-2':
this.$router.push('/Page1_2');
break;
case '1-3':
this.$router.push('/Page1_3');
break;
case '2':
this.$router.push('/Page2')
break;
case '3':
this.$router.push('/Page3')
break;
case '4':
this.$router.push("/Page4");
break;
default :
break;
}
},
},
}
</script>
3.在工程src目录下新建一个page的文件夹，分别在里面创建以下几个文件：
然后在每个文件中添加以下内容：注意每个文件修改下内容~~~~
例如在page1_1.vue中添加代码：
<template>
<div>
这是第1-1页
</div>
</template>
<script type="text/ecmascript-6">
export default {
data(){
return{}
}
}
</script>
4.在工程src目录下的route目录下的index.js文件中增加新的路由
以下是修改后的index.js文件代码：
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
//大导航栏
import Page1 from '@/page/page1.vue'
import Page2 from '@/page/page2.vue'
import Page3 from '@/page/page3.vue'
import Page4 from '@/page/page4.vue'
//子导航栏
import Page1_1 from '@/page/page1_1.vue'
import Page1_2 from '@/page/page1_2.vue'
import Page1_3 from '@/page/page1_3.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
//后面的都是自己添加的
{
path: '/page1',
name: 'Page1',
component: Page1
},
{
path: '/page1_1',
name: 'Page1_1',
component: Page1_1
},
{
path: '/page1_2',
name: 'Page1_2',
component: Page1_2
},
{
path: '/page1_3',
name: 'Page1_3',
component: Page1_3
},
{
path: '/page2',
name: 'Page2',
component: Page2
},
{
path: '/page3',
name: 'Page3',
component: Page3
},
{
path: '/page4',
name: 'Page4',
component: Page4
}
]
})
5.修改main.js文件，主要是导入饿了么UI的框架和自己编写导航栏
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
//导入elementUI相关框架
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
//导入导航栏
import Navi from './components/navigation_bar.vue'
Vue.use(ElementUI)
Vue.config.productionTip = false
// /* eslint-disable no-new */
// new Vue({
// el: '#app',
// router,
// components: { App },
// template: '<App/>'
// })
new Vue({
el: '#app',
router,
render: h => h(Navi)
})
6.打开VS Terminal，使用命令
npm install
npm run dev
即可打开网页浏览。element-ui导航栏设计相关可以参考官网,我也是半路出家的，就不误人子弟了。
PS:这里只涉及到简单的页面切换，后续的话，慢慢再往里面加些数据展示~~~~