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:左侧菜单内容,常用属性:
- :default-openeds:默认展开的菜单,通过index属性进行设置。例如在el-submenu中的index='1',如果在这里设置default-openeds='["1"]',说明默认打开的index=1的子菜单。
- :default-active:默认选中。可以这么设置:default-active=" '1-1' "。
el-submenu:可展开的菜单,常用属性:
- index:菜单的下标,文本类型,不能是数字类型。
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中的。
最后结果:启动服务器之后会直接到第一个页面。
点击其他页面会显示其他页面的信息,并对该菜单进行高亮: