Element UI 基础使用教程（基于 Vue2）

Element UI 是一套基于 Vue 2.0 的桌面端组件库，本文将结合示例代码介绍其基础使用方法。Element-UI 官方网站

一、引入 Element UI

1. 引入样式文件

在 HTML 的 <head> 中引入 Element UI 的样式表：

<link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.14/lib/theme-chalk/index.css">

2. 引入Element UI组件库

<script src="https://unpkg.com/element-ui@2.15.14/lib/index.js"></script>

3. 注册 Element UI

在 Vue 实例化前，通过 Vue.use() 注册 Element UI：

Vue.use(ELEMENT);

二、基本组件使用（以按钮组件为例）

1. 按钮组件（el-button）

按钮是最常用的交互组件，示例代码：

<el-button type="primary" round @click="addRandomObject" icon="el-icon-circle-plus" > 添加随机物体 </el-button>

主要属性说明：

type：按钮类型，可选值有 primary（主要）、success（成功）、warning（警告）、danger（危险）等
round：设置为圆角按钮
icon：按钮图标，使用内置图标库（如 el-icon-circle-plus 表示加号图标）
@click：点击事件绑定

2. 消息提示（this.$message）

用于操作后的反馈提示，示例代码：

this.$message({
    message: `恭喜你，添加成功`,
    type: 'success',
    duration: 1500, // 显示时间（毫秒）
});

主要配置项：

message：提示内容
type：消息类型，可选 success、warning、info、error
duration：自动关闭时间，默认 3000 毫秒
showClose：是否显示关闭按钮（布尔值）

三、在 Vue 实例中使用

完整的使用结构如下：

<div id="app">
    <!-- Element UI 组件 -->
    <el-button type="primary" @click="showMessage">点击我</el-button>
</div>

<script>
    Vue.use(ELEMENT);
    
    new Vue({
        el: '#app',
        methods: {
            showMessage() {
                this.$message.success('操作成功！');
            }
        }
    });
</script>

四、核心概念

组件注册：通过 Vue.use(ELEMENT) 一次性注册所有组件，无需单独引入
属性绑定：通过 : 绑定动态属性，如 :disabled="isDisabled"
事件处理：通过 @ 绑定事件，如 @click="handleClick"
表单控件：Element UI 提供了丰富的表单组件（el-input、el-select 等），支持双向绑定（v-model）

提示

Element UI 提供了丰富的 UI 组件和便捷的 API，是 Vue2 项目中快速构建企业级应用的理想选择。掌握其基础用法后，可以大大提高开发效率。