webpack+vue-cli+elementUI

1. 配置webpack和vue-cli  cmd: vue init webpack [文件名字]

前提是要先下载好全局的node  vue-cli  webpack

2. 再安装elementUI，cmd: npm i element-ui -S

3. 在vue-cli 中的main.js 中引用element-ui

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

Vue.use(ElementUI);

4. 在引入 Element 时，可以传入一个全局配置对象。该对象目前支持 size 与 zIndex 字段。

Vue.use(ElementUI, { size: 'small', zIndex: 3000 });

说明：按照以上设置，项目中所有拥有 size 属性的组件的默认尺寸均为 'small'，弹框的初始 z-index 为 3000

5. 使用element-ui：

(1) 内置过渡动画：

提供 el-fade-in-linear 和 el-fade-in 两种效果。这两个属性值对应两个不一样的fade效果

<transition name="el-fade-in-linear">
  <div v-show="show" class="transition-box">.el-fade-in-linear</div>
</transition>
<transition name="el-fade-in">
  <div v-show="show" class="transition-box">.el-fade-in</div>
</transition>

 

提供 el-zoom-in-center，el-zoom-in-top 和 el-zoom-in-bottom 三种效果。 这三个属性值对应三个不一样的zoom效果，代码跟上面的一样 只是需要把name值改掉

 

collapse 展开折叠  使用 el-collapse-transition 组件实现折叠展开效果

<el-collapse-transition>
  <div v-show="show3">
    <div class="transition-box">el-collapse-transition</div>
    <div class="transition-box">el-collapse-transition</div>
  </div>
</el-collapse-transition>

(2) Layout 布局：

通过基础的 24 分栏，迅速简便地创建布局。

通过 el-row 和 el-col 组件，并通过 el-col 组件的 span 属性我们就可以自由地组合布局。el-row 组件提供 gutter 属性来指定每一栏之间的间隔，默认间隔为 0。

通过制定 col 组件的 offset 属性可以指定分栏偏移的栏数。

通过 flex 布局来对分栏进行灵活的对齐。将 type 属性赋值为 'flex'，可以启用 flex 布局，并可通过 justify 属性来指定 start, center, end, space-between, space-around 其中的值来定义子元素的排版方式。

 

基于断点的隐藏类：Element 额外提供了一系列类名，用于在某些条件下隐藏元素   

请自行引入以下文件：import 'element-ui/lib/theme-chalk/display.css';

例如： 在元素标签上加class=”hidden-md-and-up”