本章介绍一个前端渲染框架叫element UI，是一个基于vue开发的组件库，它就相当于jquery的插件，不过它的作用和CSS的Bootstrap有些类似，具体更详细的了解大家可以去官网看一看https://element.eleme.cn/#/zh-CN/component/quickstart
你可以把它理解成一个含有CSS样式能力的渲染框架，后面给大家演示的时候一看就能明白，它本质上就是在单一的样式上加入了渲染效果，分为css和js两块代码，这是vue近些年在前端为什么这么火的原因，因为培养成本低，这就和python语言在人工智能领域很火一样，本质上并不是语言或框架的本身有多优秀，而是这个框架或语言对于企业来说，用人或培养成本低，开发快，就比如在人工智能领域写一个贝叶斯算法用来预测输入法用户的输入，如果你不用python语言，你要自己去搭建模型，自己去测试算法，这还是最简单的算法，再难一点的你要加入神经网络，所以从零培养一个人工智能开发人员的成本根本不是一个小企业能够负担得起的，所以大家不要把企业给你的目标当做自己的技术目标，要去多看一看底层的东西，言归正传我们开看一下element ui的使用
首先element ui在官网为我们提到了两种引用方式，一种是把资源包全部下载下来，导入到项目中，之后正常的使用就行，但是下载有些慢，而且正式开发的时候项目上会告诉你引用方式，本篇为了方便就用第二种方式，引用官方的路径
先来看一下布局组件，element的布局组件其实就是在bootstrap网格的效果上加了渲染而已，不过element的布局组件总计24格网格，不可缺少，比如一行那就整个24格，如果你分两行那就是每行12格，官网上有代码，可以直接c+v过来
下过如下
官网给了你很多的例子，而且官网上如何控制网格间距等都给你了，使用起来就和bootstrap一模一样，导入vue后cv代码就行了
你要是不想用上面的普通网格，element给你提供了一种网格容器，给你准备了一个表格类似的Container ，对于Container 我要给大家解释一下它的布局顺序，因为官网上原话有点笼统，官网上有价值的原话是这样说的：
外层容器。当子元素中包含
以上组件采用了 flex 布局，使用前请确定目标浏览器是否兼容。此外，
这两句话我要给大家解释一下方便大家理解，首先第二句话是告诉我们整个的Container网格布局容器由container、header、aside、main、footer五个标签构成的，你可以任意的组合，但有个限制就是父子关系不能有其他的标签插足，但是这个限制只生效于一个container标签以及其他的四个标签组成的一个容器内，就是说如果其内部再出出现一个container那就是一个新的容器了，两个容器在父子标签限制上没有冲突，也就是你可以用container作为容器的分界点
再之后第一句话，它描述的有些不完全，在你实际使用的时候你就会发现，你可以按照你的需要嵌套多个容器，不同的container容器之间默认一定是左右排列，但是如果中间出现一个container容器包含了 header 或 footer，那么该容器内的标签都会以上下排列，但是只止步于该容器内，不影响内部嵌套的其他容器
我下面的例子帮助大家理解
Aside Header Aside Aside main Footer
效果
本章的最后我强调一下element的表格，官网的代码，不要完全拷贝，有的东西是不需要的
注意:data="tableData"这个是指定表格展示的数据是谁
效果如下
最后说一下，之所以不需要全部cv过来是因为官网上的代码是babel规范编译后的代码，babel是一个新一代的js编译器，在细节上和我们目前主流的写法有些差异，它还没有推广开
