《ElementUI 容器(elementui怎么用)》
在使用ElementUI容器时，我们需要确保已经正确安装并引入了ElementUI。对于大多数场景，解决方案是通过合理配置布局容器组件，如el-container、el-header、el-aside、el-main和el-footer等，来搭建页面结构。
一、基本安装与引入
在Vue项目中，如果使用脚手架创建项目，可以在项目初始化时选择安装ElementUI。或者单独执行命令安装：npm install element -ui -S。然后在main.js中引入：
javascript
import ElementUI from 'element - ui';
import 'element - ui/lib/theme - chalk/index.css';
Vue.use(ElementUI);
二、简单容器布局
这是最基础的布局方式。
```html
Header
Main
Footer
export default {
}
/* 可以根据需要添加样式 */
.el - header, .el - footer {
background - color: # b3c0d1;
color: # 333;
text - align: center;
line - height: 60px;
}
.el - main {
background - color: # e9eef3;
color: # 333;
text - align: center;
padding: 10px;
}
```
这种布局将页面分为头部、主体和底部三个部分。
三、带侧边栏的布局
当页面有导航菜单等需要放在侧边栏时，可以这样设置。
```html
<el - aside width = "200px" > Aside
Header
Main
export default {
}
.el - aside {
background - color: # d3dce6;
color: # 333;
text - align: center;
line - height: 200px;
}
/* 其他样式同上 */
```
还可以进一步对侧边栏的内容进行丰富，如添加菜单组件等。通过这些容器组件的组合使用，就可以快速构建出符合需求的页面布局。
