1、新建一个vue项目
2、安装element-ui
进入到该项目目录,输入:npm install --save element-ui
之后可以在package.json中查看是否下载了相关依赖
最后在main.js中加入:
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
3、引入相关模板
去到element官网,找到布局容器,选择一个模板将其内容替换App.vue中的内容,例如:
<template>
<div id="app">
<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>
</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>
此时页面效果:
element-ui相关标签说明:
el-container:构建整个页面框架
el-aside:构建左侧菜单
el-menu:左侧菜单内容,常用属性:
el-submenu:可展开的菜单,常用属性:
template:对应el-submenu的菜单名,可以在其设置菜单图标,通过i标签的class属性。
el-menu-item:菜单的子节点,不可再展开。index属性值为文本类型。
我们可以改造成这样:即再添加一级菜单。
<template>
<div id="app">
<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']"
:default-active="'1-1'">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-message"></i>导航一</template>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
<el-submenu index="1-3">
<template slot="title">选项3</template>
<el-menu-item index="1-3-1">选项1-3-1</el-menu-item>
<el-menu-item index="1-3-2">选项1-3-2</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="2">
<template slot="title">
<i class="el-icon-menu"></i>导航二</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
</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>
</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>
当前效果:
4、动态显示菜单
在views下新建几个页面,PageOne.vue、PageTwo.vue、PageThree.vue、PageFour.vue,里面内容基本相同。比如PageOne就是
<template>
<div>
<h1>这是page1</h1>
</div>
</template>
<script>
</script>
<style scoped>
</style>
接下来要了解vue的整体图:
蓝色部分是vue服务,红色部分是入口,也就是App.vue,橙色部分是我们的页面。我们要将一开始的element代码,转移到黄色区域里面,不然的话会出现红色和橙色区域里都会出现菜单栏,因为我们的页面是从主入口进入的。
在views下新建一个Index.vue
<template>
<div>
<el-container style="height: 500px; border: 1px solid #eee">
<el-aside width="200px"
style="background-color: rgb(238, 241, 246)">
<el-menu :default-openeds="['0','1']"
:router="$route">
<el-submenu v-for="(item,index) in $router.options.routes"
:key="index"
:index="index+''">
<template slot="title">
<i class="el-icon-message"></i>{{item.name}}</template>
<el-menu-item v-for="(item2, index2) in item.children"
:key="index2"
:index="item2.path"
:class="$route.path==item2.path?'is-active':''">{{item2.name}}</el-menu-item>
</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>
<script>
</script>
<style scoped>
</style>
使用v-for遍历出一级菜单,再使用v-for遍历二级菜单。首先要给el-menu加上:router属性,然后利用router-view进行渲染,最后要实现点击不同菜单显示不同界面要设置::index="item2.path"。为了点击时对菜单进行高亮,如果点击的当前页面和菜单对应,就加上class="is-active"。
router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Test from '../views/Test.vue'
import PageOne from '../views/PageOne.vue'
import PageTwo from '../views/PageTwo.vue'
import PageThree from '../views/PageThree.vue'
import PageFour from '../views/PageFour.vue'
import Index from '../views/Index.vue'
Vue.use(VueRouter)
const routes = [
{
path: "/",
name: "导航一",
component: Index,
redirect: "/pageOne",
children: [
{
path: '/pageOne',
name: '页面一',
component: PageOne,
},
{
path: '/pageTwo',
name: '页面二',
component: PageTwo,
},
]
},
{
path: "/navigation",
name: "导航二",
component: Index,
children: [
{
path: '/pageThree',
name: '页面三',
component: PageThree,
},
{
path: '/pageFour',
name: '页面四',
component: PageFour,
},
]
},
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
这里的redirect用于直接跳转到PageOne.vue。
App.vue
<template>
<div id="app">
<router-view></router-view>
</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>
vue中的模板可以用<router-view></router-view>进行替换。这里替换了两次,一次是菜单栏替换App.vue中的,另一次是PageOne等页面替换Index.vue中的。
最后结果:启动服务器之后会直接到第一个页面。
点击其他页面会显示其他页面的信息,并对该菜单进行高亮: