Vue使⽤ElementUI搭建后台模板
⽂章⽬录
创建Vue项⽬
1. 使⽤Vue项⽬管理器可视化创建⼀个Vue项⽬，参考⽂章：
2. 创建好后，在Vue项⽬管理器中安装ElementUI插件，具体操作看下⾯动图演⽰
3. 下载完后，都采⽤默认设置，点击完成安装：
4. 到此，Vue项⽬创建完成，测试是否安装成功，⽤IDEA打开我们创建的项⽬，在Terminal输⼊npm run serve命令启动我们的项⽬，
访问localhost:8080 ，出现下⾯⼀段英⽂和⼀个el-button表⽰安装elementui成功。
搭建后台模板
1. 访问ElementUI官⽹：element.eleme/
2. 选择组件中的Container布局容器中⼀款适合后台模板的布局
<el-container>
<el-header>Header</el-header>
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-main>Main</el-main>
</el-container>
</el-container>
<style>
.el-header, .el-footer{
background-color: #B3C0D1;
color: #333;
text-align: center;
line-height: 60px;
}
.el-aside{
background-color: #D3DCE6;
color: #333;
text-align: center;
line-height: 200px;
}
.el-main{
background-color: #E9EEF3;
color: #333;
text-align: center;
line-height: 160px;
vue element admin}
body > .el-container{
margin-bottom: 40px;
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside{
line-height: 260px;
}
.el-container:nth-child(7) .el-aside{
line-height: 320px;
}
</style>
3. 布局中的Aside为我们的左侧菜单栏，先完成它，同样在我们elementui官⽹中选择⼀个。
<el-aside width="200px" >
<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-menu：左侧菜单栏，⾥⾯常⽤属性：
:default-openeds：默认展开的菜单，通过菜单的index值来关联。
default-active：默认选中的菜单，通过菜单的index值来关联。
el-submenu：可展开的菜单，常⽤属性：
index：菜单的下标，⽂本类型，不能是数值类型。
template：对应el-submenu的菜单名。
i：设置菜单图标，通过class属性实则。
el-menu-item：菜单的⼦节点，不可再展开，常⽤属性：
index：菜单的下标，⽂本类型，不能是数值类型。
3. 上⾯等⼀下搭建后台会⽤⽤到ElementUI组件，现在正式开始搭建，简单的规划图：
4. App.vue ⽗组件存放我们路由的Home.vue即可。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。