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”