介绍 & lt; !——布局的首页——比;
& lt; template>
& lt; div>
& lt; l-header> & lt;/l-header>
& lt; l-aside> & lt;/l-aside>
& lt; l-main> & lt;/l-main>
& lt;/div>
& lt;/template>
& lt; script>
从& # 39;进口LHeader。/组件/头# 39;
从& # 39;进口LAside。/组件/一边# 39;
从& # 39;进口LMain。/组件/主要# 39;
出口默认{
数据(){
返回{}
},//引入组件
组件:{
LHeader,
LAside,
LMain,
},
}
& lt;/script>
& lt;风格lang=皊css"scoped> & lt;/style> & lt; !——头部文件——比;
& lt; template>
& lt; div类=癶eader"祝辞
& lt; !标志——比;
& lt; logo> & lt;/logo>
& lt; !——折叠按钮——比;
& lt; hamburger> & lt;/hamburger>
& lt; !——头部导航栏——比;
& lt; div类=癶eardNavBar"祝辞
& lt; el-menu default-active=?”;类=癳l-menu-demo"background - color=? 4 b5f6e"文本颜色=? fff"active-text-color=? ffd04b"模式=癶orizontal"比;
& lt; el-menu-item指数=?”;@click=皉outer.push美元(& # 39;/& # 39;)“在首页& lt;/el-menu-item>
& lt; el-menu-item指数=?”;@click=皁penUrl(& # 39; # & # 39;)“在使用文档& lt;/el-menu-item>
& lt; el-menu-item指数=?”;@click=皁penUrl (& # 39; https://github.com/levy-w-wang/lion-ui& # 39;)“祝辞GitHub
& lt;/el-menu>
& lt;/div>
& lt; !——右侧信息——比;
& lt; div比;
& lt; !——全屏——比;
& lt; div比;
& lt;我类=癳l-icon-full-screen"@click=皌oggleFull"祝辞& lt;/i>
& lt;/div>
& lt; !——个人信息——比;
& lt; div类=皍serinfo"祝辞
& lt; el-dropdown触发=癶over"祝辞
& lt;跨类=癳l-dropdown-link userinfo-inner"比;
https://www.yisu.com/zixun/& lt; img src=" @assets/img/user.jpg "/>
{{store.getters.userInfo美元。用户名}}<我类=" el-icon-caret-bottom ">
<我类=" el-icon-s-home "> 首页
<我类=" el-icon-s-custom "> 我的主页
这篇文章运用简单易懂的例子给大家介绍利用Vue如何实现组件封装,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。
<强>完整效果图如下:
拆分后的,布局结构图:
布局最外层指数代码,使用头部,侧边栏,主内容栏组成,代码如下:
头部指数。vue代码:
