UI库的良好使用可以大大提高开发的效率，这里记录一下对Element-UI的学习过程
开发前准备
Element-UI的官网打开（地址），之后可以用npm在开发的文件根目录下安装（npm i element-ui -S）
安装好就可以引入组件使用，官方文档中提及了完整引入、按需引入（需要哪个组件引入哪个组件）两种方法，都是在main.js中按说明配置即可
另外还有一个全局配置（设置组件尺寸和弹框的初始z-index），配置在main.js中Vue.use(ElementUI)里即可
下面就是对各个组件的一个学习和个人小结，实时更新
Layout布局
这里是单行的布局方式，可以理解成一行中的多个小单元格的布局
基础布局
el-row配置行，el-col配置列，像是一个个单行的表格
其中el-col上绑定的span属性控制每一个小单元格大小，默认值和最大值都是24
一行总数超出24时，会把原本该在一行的显示在多行
分栏间隔
el-row上的属性gutter，默认值为0，可以设置大于0的任意数字
在PC端，设置的这个gutter值为该单元格左右的padding之和
例如下图，gutter为40，则左右padding都是20px
混合布局
其实就是自己设置el-col的span以及el-row的gutter，没太多好说的
分栏偏移
el-col的offset属性，设置某个el-col元素左侧空多少份的位置，默认为0
如果其offset和span之和大于24，则该行剩余元素移到下一行，同时这个元素只显示一部分
例如下面第一个hello，offset和span之和为25，该元素只显示7份的量
对齐方式（响应式布局）
el-row里的type属性设置为flex即可，其中子元素（el-col）就变成flex布局
这时候左侧的offset是根据行整体来计算的，而剩余部分则不再是24份，按照span值来进行比例划分
例如下图，第一个元素offset是4，即左侧空出一行的4份的量（也就是一行的1/6），然后剩下的分隔，总份数为8+8+8+16=40份，则其中前三个都是剩余40份中的8，最后一个为40份里的16
当el-col不设置offset，且一行的span不满24时，可以设置不同的justify属性值
原文地址：https://www.cnblogs.com/shige720/p/11666934.html