ElementUI Container布局容器理解和使用

转载于:

组件 | Elementhttps://element.eleme.cn/#/zh-CN/component/container

elementUI Container 用于布局的容器组件,方便快速搭建页面的基本结构:

十分方便然我们节省布局的时间然我们有更多的精力放在我们要做的功能上

一、理解:

Container(肯特呢)容器 是elementUI 采用flex布局,编写的一套组件。

:外成容器。当子元素中包含时候,全部的子元素会全部垂直上下排列,要不然就会水平排列

<el-header> :顶部容器

:侧边栏容器

:主要内容区域

二、使用以vue2 Cli为例:

先在项目下输入命令:

   npm install element-ui -S

 在main.写入

// 引用elementui
import ElementUI from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

在要显示的组件之间复制elementUI的代码和css

ElementUI Container布局容器理解和使用_第1张图片

可以看到我们就可以看到布局的大概样子了

如何根据自己的需要写组件放到相应的容器里面就好了 

 ElementUI Container布局容器理解和使用_第2张图片

 

你可能感兴趣的:(vue.js,css3)