初识ElementUi

一：ElementUi简述：

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

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

二：安装ElementUi及使用：

1：安装：

    npm install element-ui --save

2：引入：

    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}

三：ElementUI组件：

        1：栅格布局：
            首先不得不提的是布局，布局是网页的基础，ElementUI中也提供了著名的栅格布局，ElementUI在设计栅格布局时参考了Bootstrap的栅格系统，因此两者非常相似！若使用多Bootstrap那么使用ElementUI将会很轻松。            
            ElementUI的栅格系统与Bootstrap很相似，不同的是Bootstrap为12栏分栏，而ElementUI为24栏分栏。
            通过row和col组件，并设置col组件的span属性我们就可以自由的组合布局。
            --基础布局：
                <el-row>
                    <el-col :span="8"></el-col>
                    <el-col :span="8"></el-col>
                    <el-col :span="8"></el-col>
                </el-row>
            --分栏间隔：
                row组件提供gutter属性来制定每一栏之间的间隔，默认间隔为0。
                <el-row :gutter="20">
                    <el-col :span="8"></el-col>
                    <el-col :span="8"></el-col>
                    <el-col :span="8"></el-col>
                </el-row>
                注：分栏间隔实际上是对col组件添加padding-left和padding-right，因此一定不要在col下直接书写内部内容，否则设置分栏间隔无效，正确的做法是在col里再添加一个div包裹真正的内容。
                <el-row :gutter="20">
                    <el-col :span="8">
                        <div>con</div>
                    </el-col>
                    <el-col :span="8">
                        <div>con</div>
                    </el-col>
                    <el-col :span="8">
                        <div>con</div>
                    </el-col>
                </el-row>
            --混合布局：
                可以通过基础的 1/24 分栏任意扩展组合形成较为复杂的混合布局。但是分母最终应该为24！
                <el-row :gutter="20">
                    <el-col :span="12"></el-col>
                    <el-col :span="8"></el-col>
                    <el-col :span="4"></el-col>
                </el-row>
            --对齐方式：
                通过flex布局来对分栏进行灵活的对齐。将type属性值设置为flex，可以启用flex布局，并通过justify属性指定对齐方式。
                <el-row :gutter="20" type="flex" justify="center">
                    <el-col :span="12"></el-col>
                    <el-col :span="8"></el-col>
                    <el-col :span="4"></el-col>
                </el-row>
            --响应式布局：
                ElementUI参照了Bootstrap的响应式设计，预设了5个响应尺寸：xs,sm,md,lg,xl。
                xs：<768px
                sm：>=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的很强大，并且使用简单，不过东西也很多，使用时需要不断的翻官网文档。