vue.js中Element-UI组件 页面布局

vue.js中Element-UI组件 之 页面布局

一、开发环境的搭建

1. （1）普通的开发

第一步 ： 引入 index.css文件
第二步 : 引入elementui。js

1. （2）模块化开发：需要在项目中安装element-ui模块
   二、常用布局
   el-row 、el-col 可以实现24格栅格布局，如果布局较复杂，可以嵌套使用
   el-container 作为 布局容器 （可以嵌套使用）
   内部可包含el-header(顶栏）
   el-aside(侧边栏）,el-main(内容）,el-footer(底栏）

el-row 属性:
gutter 栅格间距
type 布局模式，可选flex 现代浏览器下有效
justify flex 布局下的水平排列方式
阿玲 flex 布局下的垂直排列方式
tag 自定义元素标签
el-col属性
span 栅格占据的列数
offset 栅格左侧的间隔格数
push 栅格向右移动格数
pull 栅格向左移动格数
el-container属性
direction 子元素的排列方式
el-header属性
height 顶栏高度