Vue 开发指南（续1）
上一章节Spring Boot+Vue前后端分离开发04-----Vue开发指南已讲解到前三点内容，本章节补充了后面三点，综合起来知识点如下
4、集成ElementUI
点击右上角安装依赖
输入Element UI
接着运行，运行到这个步骤的时候说明element-ui组件已经安装成功
vue add element-ui #如果element-ui没有安装成功，那么在工程项目下面新增此命令
cnpm install --save element-ui
5、使用Container布局容器
element-ui使用container容器布局，当要新建一个布局的时候，直接输入el-container的标签即可。除此之外还有：el-aside菜单栏、el-header页头、el-main页主体。通过上述几个标签开发一个标准的管理控制台布局，如下图：
views/目录下新建Container.vue
进入到element-ui官网https://element.eleme.cn/#/zh-CN/component/container复制如下代码到Container.vue
<el-container style="height: 500px; border: 1px solid #eee">
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<el-menu :default-openeds="['1', '3']">
<el-submenu index="1">
<template slot="title"><i class="el-icon-message"></i>导航一</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="1-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">选项4</template>
<el-menu-item index="1-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="2">
<template slot="title"><i class="el-icon-menu"></i>导航二</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="2-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="2-4">
<template slot="title">选项4</template>
<el-menu-item index="2-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="3">
<template slot="title"><i class="el-icon-setting"></i>导航三</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="3-1">选项1</el-menu-item>
<el-menu-item index="3-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="3-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="3-4">
<template slot="title">选项4</template>
<el-menu-item index="3-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
</el-menu>
</el-aside>
<el-container>
<el-header style="text-align: right; font-size: 12px">
<el-dropdown>
<i class="el-icon-setting" style="margin-right: 15px"></i>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>查看</el-dropdown-item>
<el-dropdown-item>新增</el-dropdown-item>
<el-dropdown-item>删除</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<span>王小虎</span>
</el-header>
<el-main>
<el-table :data="tableData">
<el-table-column prop="date" label="日期" width="140">
</el-table-column>
<el-table-column prop="name" label="姓名" width="120">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
</el-table>
</el-main>
</el-container>
</el-container>
<style>
.el-header {
background-color: #B3C0D1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
}
</style>
<script>
export default {
data() {
const item = {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
};
return {
tableData: Array(20).fill(item)
}
}
};
</script>
随后在index.js上面添加一个路由
const routes = [
……
//新增一个Container路由
{
path: '/container',
name: 'Container',
component: () => import('../views/Container.vue')
}
]
最后访问http://localhost:8080/container即可看到Container布局的界面
6、使用Element菜单
Elment菜单由el-menu定义，el-submenu表示这一层菜单栏之下还有一个子菜单，
el-menu-item-group表示一个菜单组合。
此外还有属性：default-openeds代表子菜单是否展开，index代表菜单顺序通常用1、2、3、4表示（子菜单会多一级1-1、1-2、1-3），具体代码如下
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<el-menu :default-openeds="['1', '3']">
<el-submenu index="1">
<template slot="title"><i class="el-icon-message"></i>导航一</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="1-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">选项4</template>
<el-menu-item index="1-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
</el-menu>
</el-aside>
接下来还有一种方法是通过Vue router开发动态菜单，即通过点击菜单实现页面切换，首先我们创建One.vue、Two.vue、Three.vue
<template>
<!--One.vue 页面一-->
<!--Two.vue 页面二-->
<!--Three.vue 页面三-->
<div>页面一</div>
</template>
<script>
export default {
name: "One"
}
</script>
<style scoped>
</style>
接着将它添加到index.js路由上去
import One from '../views/One.vue'
import Two from '../views/Two.vue'
import Three from '../views/Three.vue'
const routes = [
……
{
path: '/one',
name: 'One',
component: One
},
{
path: '/two',
name: 'Two',
component: Two
},
{
path: '/three',
name: 'Three',
component: Three
}
]
修改项目根目录App.vue的代码，在el-main标签内增加这样一行
<router-view></router-view>
<template>
<div>
<!--整体页面容器-->
<el-container style="height: 500px; border: 1px solid #eee">
<!--左侧菜单栏-->
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<el-menu>
<el-submenu index="1">
<template slot="title"><i class="el-icon-message"></i>页面一</template>
</el-submenu>
<el-submenu index="2">
<template slot="title"><i class="el-icon-setting"></i>页面二</template>
</el-submenu>
<el-submenu index="3">
<template slot="title"><i class="el-icon-setting"></i>页面三</template>
</el-submenu>
</el-menu>
</el-aside>
<!--主内容部分-->
<el-container>
<!--内容头部-->
<el-header style="text-align: right; font-size: 12px">
<el-dropdown>
<i class="el-icon-setting" style="margin-right: 15px"></i>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>查看</el-dropdown-item>
<el-dropdown-item>新增</el-dropdown-item>
<el-dropdown-item>删除</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<span>王小虎</span>
</el-header>
<!--具体内容-->
<el-main>
<router-view></router-view>
</el-main>
</el-container>
</el-container>
</div>
</template>
<style>
.el-header {
background-color: #B3C0D1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
}
</style>
<script>
export default {
data() {
const item = {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
};
return {
tableData: Array(20).fill(item)
}
}
};
</script>
最后分别访问,可以看到以下效果
http://localhost:8080/one
http://localhost:8080/two
http://localhost:8080/three
 |
 |
 |
