Vue整合ElementUI，组件使用教程，适合新手_vue和elementui结合使用

文章目录

• Vue整合ElementUI

• 一. 按钮组件

• 二. Link 文件链接组件

• 三. Layout(栅格) 布局组件的使用

• 四. Container 布局容器

• 五. Radio 单选框

• 六. Checkbox 多选框

• 七. Input 输入框

• 八. Select选择器组件

---

Vue整合ElementUI

=================================================================================

提示：这里我使用的Vue是2.0版本

推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

1. 下载elementui的依赖

npm i element-ui -S

2. 在src下的main.js中指定当前项目中使用elementui

import ElementUI from ‘element-ui’;

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

3. 将elementui注册到vue实例上

Vue.use(ElementUI);

---

一. 按钮组件

==========================================================================

1.默认样式按钮

默认按钮

主要按钮

成功按钮

信息按钮

警告按钮

危险按钮

2.简洁按钮 plain 鼠标移动上去才会显示背景颜色

朴素按钮

主要按钮

成功按钮

信息按钮

警告按钮

危险按钮

3.使用圆角按钮 round

圆角按钮

主要按钮

成功按钮

信息按钮

警告按钮

危险按钮

4.图标按钮 idco：具体要显示的图标

按钮组件的详细使用

• 日后使用element ui的相关组件时需要注意的是 所有组件都是el-组件名称开头

创建按钮：<el-button>默认按钮</el-button>

组件属性使用

• 总结：在element中所有的组件的属性使用都是直接将属性名=属性值方式写在对应的组件标签上，boolean类型的属性默认为false可以简写一个属性名字表示为true。