Element，是由国内的饿了么团队开发并开源的一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。简单的说ElementUi是一个基于Vue的Ui框架，适用于PC端。ElementUi与前端著名的Bootstrap框架很相似。

ElementUi官方网址：https://element.eleme.cn/#/zh-CN

    npm install element-ui --save

    ElementUi有两种引入方式：全局引入，按需引入。

    --1：全局引入：

        在main.js内：

        import ElementUI from 'element-ui'; 

        import 'element-ui/lib/theme-chalk/index.css';

        Vue.use(ElementUI)

    需要注意的是：全局引入时需要单独引入样式文件。

    测试一下是否引入成功，我们是在main.js内全局引入因此可以在项目下的任意组件内使用ElementUi：在element.vue组件内写一个element-ui的button看看效果：

正确引入，正常编译执行，element-ui也正常使用了。 

    --2：按需引入：

    ElementUI为我们提供的组件，功能还是比较多的，通常情况下我们可能使用不到这么多，只需要使用其中的部分，此时我们就可以按需引入。                                 按需引入根据自己的需求加载的内容会少一些可以提高性能。                 借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。                     1：安装babel-plugin-component：                         npm install babel-plugin-component -D                         注：是-D而不是我们通常安装插件时选择的-S，这个插件只需要在开发环境下用到。                     2：修改配置文件：                         vuecli2项目修改.babelrc文件，vuecli3项目修改bable.config.js文件：                         {                           "presets": [                               "@vue/app",                               ["es2015", { "modules": false }]                           ],                           "plugins": [                             [                               "component",                               {                                 "libraryName": "element-ui",                                 "styleLibraryName": "theme-chalk"                               }                             ]                           ]                         }                     3：npm run serve运行项目你会发现，嗯？？？报错了很长一段意思是找不到一个什么什么bable es2015。                         提示很明显缺少一个包，那么install，安装时出现了一段警告，说的是es2015已废弃，推荐我们使用babel-preset-env。                         好的，那么安装：npm install babel-preset-env --dev                          修改配置，既然2015废弃了那么配置上也得更改：                         {                           "presets": [                               "@vue/app",                               ["env", { "modules": false }]                           ],                           "plugins": [                             [                               "component",                               {                                 "libraryName": "element-ui",                                 "styleLibraryName": "theme-chalk"                               }                             ]                           ]                         }                         ok，解决了不抱错了！                     4：按需引入：                         在main.js文件内引入：                         import {Button} from 'element-ui'                         Vue.component(Button.name,Button);或者：Vue.use(Button)                         引入之后就愉快的可以在项目组件内使用了。                     5：全局配置：                         在引入ElementUI时可以传入一个全局配置对象，该对象支持zise和zIndex。                         size用于改变组件的默认尺寸，zIndex设置弹框的初始zIndex(默认值：2000)。                         完整引入：                             Vue.use(Element,{size:'small',zIndex：3000})                         按需引入：                             Vue.prototype.$ELEMENT={size；'small'，zIndex:3000}

        1：栅格布局：             首先不得不提的是布局，布局是网页的基础，ElementUI中也提供了著名的栅格布局，ElementUI在设计栅格布局时参考了Bootstrap的栅格系统，因此两者非常相似！若使用多Bootstrap那么使用ElementUI将会很轻松。                         ElementUI的栅格系统与Bootstrap很相似，不同的是Bootstrap为12栏分栏，而ElementUI为24栏分栏。             通过row和col组件，并设置col组件的span属性我们就可以自由的组合布局。             --基础布局：                                                                                                              --分栏间隔：                 row组件提供gutter属性来制定每一栏之间的间隔，默认间隔为0。                                                                                                                  注：分栏间隔实际上是对col组件添加padding-left和padding-right，因此一定不要在col下直接书写内部内容，否则设置分栏间隔无效，正确的做法是在col里再添加一个div包裹真正的内容。                                                               con                                                                   con                                                                   con                                                   --混合布局：                 可以通过基础的 1/24 分栏任意扩展组合形成较为复杂的混合布局。但是分母最终应该为24！                                                                                                              --对齐方式：                 通过flex布局来对分栏进行灵活的对齐。将type属性值设置为flex，可以启用flex布局，并通过justify属性指定对齐方式。                                                                                                              --响应式布局：                 ElementUI参照了Bootstrap的响应式设计，预设了5个响应尺寸：xs,sm,md,lg,xl。                 xs：=768px                 md：>=992px                 lg：>=1200px                 xl：>=1920px             --隐藏类：                 ElementUI提供了一系列类名，用于在某些条件下隐藏呀un苏。这些类名可以添加在任何dom元素或自定义组件上。                 如果需要使用需要自行引入css：                     import 'element-ui/lib/theme-chalk/display.css';                 包含的类及其含义：                     hidden-xs-only：当视口在xs尺寸时隐藏                     hidden-sm-only：当视口在sm尺寸时隐藏                     hidden-sm-and-down：当视口在sm及一下尺寸时隐藏                     hidden-sm-and-uo：当视口在sm及以上尺寸时隐藏                     hidden-md-only - 当视口在 md 尺寸时隐藏                     hidden-md-and-down - 当视口在 md 及以下尺寸时隐藏                     hidden-md-and-up - 当视口在 md 及以上尺寸时隐藏                     hidden-lg-only - 当视口在 lg 尺寸时隐藏                     hidden-lg-and-down - 当视口在 lg 及以下尺寸时隐藏                     hidden-lg-and-up - 当视口在 lg 及以上尺寸时隐藏                     hidden-xl-only - 当视口在 xl 尺寸时隐藏

关于ElementUI暂时就记录到这里，其他的什么组件就不再记录了，官网文档写的明明拜拜，后面使用中有问题再继续记录。总体而言ElementUI的很强大，并且使用简单，不过东西也很多，使用时需要不断的翻官网文档。