Vue后台管理系统练习-1首页侧栏搭建

VIP文章 YK_Ark

已于 2022-05-05 08:58:58 修改

阅读量1.6k

点赞数

分类专栏： vue后台管理项目文章标签： vue.js elementui javascript

于 2022-05-03 17:37:03 首次发布

本文链接：https://blog.csdn.net/Yuki_Aruki/article/details/124558275

版权

这里利用element-ui的container布局，在官网->组件->base里可以找到相关组件的使用方法，以及布局模板，也可以根据自己的需求进行布局

使用前先在main.js中引入需要使用的组件：

import {
    Container, Main, Header, Aside } from 'element-ui';
Vue.use(Container, Main, Header, Aside)

引用后可以直接在Home.vue搭建基本布局，此处使用官网的布局：

<el-container style="height: 100%">
	<el-aside>aside</el-aside>
<el-container>
<el-header>Header</el-header>
<el-main>Main</el-main>
</el-container>

稍微调整一下css后的效果如下（没有做全局的布局调整，所以有些浏览器自带白边）：
在这里插入图片描述
在侧栏部分，同样引用element-ui的navmenu组件，通过设置data中的isCollapse可以使侧栏保持展开，方便我们编辑

由于项目中只需要“首页”，“商品管理”，“用户管理”，“其他”
“其他”下还有两个页面，可总结为组件中的单一选项el-menu-item和选项组el-submenu，因此只要删除得只剩两个模板，就能够进行后续的数据绑定了

框架大致如下：

<el-menu>
	<el-menu-item>
		<i>icon</i>
		<span slot="title">title</span>
	</el-menu-i

关注