当前位置：首页 > 前端教程

elementui vue2

2026-01-12 15:33:28前端教程

使用 Element UI 与 Vue 2 的指南

Element UI 是一个基于 Vue 2 的组件库，专为开发者、设计师和产品经理设计，提供丰富的组件和交互方式。

安装 Element UI

在 Vue 2 项目中安装 Element UI 可以通过 npm 或 yarn 完成。

npm install element-ui -S

或

yarn add element-ui

引入 Element UI

在项目的入口文件（通常是 main.js）中引入 Element UI 及其样式文件。

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

按需引入组件

如果只需要部分组件，可以通过插件如 babel-plugin-component 实现按需加载。

安装插件：

npm install babel-plugin-component -D

修改 .babelrc 或 babel.config.js：

{
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

在代码中按需引入组件：

elementui vue2

import { Button, Select } from 'element-ui';

Vue.use(Button);
Vue.use(Select);

使用组件

在 Vue 单文件组件中直接使用 Element UI 的组件。

<template>
  <div>
    <el-button type="primary">按钮</el-button>
    <el-select v-model="value" placeholder="请选择">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }],
      value: ''
    }
  }
}
</script>

自定义主题

Element UI 支持主题定制，可以通过安装主题生成工具实现。

安装主题工具：

npm install element-theme -g
npm install element-theme-chalk -D

初始化变量文件：

elementui vue2

et -i

编译主题：

et

在项目中引入生成的主题文件：

import '../theme/index.css';
import ElementUI from 'element-ui';
Vue.use(ElementUI);

常见问题

版本兼容性
Element UI 2.x 版本专为 Vue 2 设计，Vue 3 需要使用 Element Plus。

国际化
Element UI 支持多语言，通过 Vue.use(ElementUI, { locale }) 引入语言包。

import lang from 'element-ui/lib/locale/lang/en';
import locale from 'element-ui/lib/locale';

locale.use(lang);

表单验证
Element UI 的表单组件内置验证功能，结合 rules 属性使用。

<el-form :model="form" :rules="rules" ref="form">
  <el-form-item label="活动名称" prop="name">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
</el-form>

data() {
  return {
    form: { name: '' },
    rules: {
      name: [
        { required: true, message: '请输入活动名称', trigger: 'blur' }
      ]
    }
  }
}

标签: elementui