ElementUI从入门到实战全攻略

Element UI 是饿了么团队推出的基于 Vue 2.x 的桌面端组件库，凭借丰富的组件、优雅的样式和便捷的使用方式，成为 Vue 2 项目开发的首选 UI 库之一。本文从环境准备、安装、引入、组件使用、主题定制、国际化到常见问题排查，全方位讲解 Element UI 的使用方法，覆盖新手入门到生产环境优化全场景。

一、环境前提（必看）

Element UI 仅兼容 Vue 2.x 版本，Vue 3 项目需使用 Element Plus（Element UI 的 Vue 3 升级版）。

先检查当前项目的 Vue 版本，避免版本不兼容问题：

bash 复制代码

# 查看 Vue 版本
npm list vue

若输出版本为 3.x，建议：

切换项目为 Vue 2.x：npm install vue@2.7.14 --save
或改用 Element Plus：npm install element-plus --save（本文仅针对 Element UI）

二、安装 Element UI

方式 1：npm 安装（推荐）

打开项目终端，执行以下命令：

bash 复制代码

npm install element-ui --save

--save 会将依赖写入 package.json 的 dependencies 中，确保团队协作或部署时依赖一致。

方式 2：yarn 安装

若项目使用 yarn 包管理，执行：

javascript 复制代码

yarn add element-ui

三、引入 Element UI

Element UI 支持完整引入和按需引入两种方式，可根据项目需求选择。

3.1 完整引入（新手首选）

完整引入无需配置额外插件，一行代码即可全局注册所有组件，适合快速开发或小型项目。在项目入口文件 main.js 中添加以下代码：

javascript 复制代码

import Vue from 'vue';
import ElementUI from 'element-ui'; // 引入 Element UI 核心库
import 'element-ui/lib/theme-chalk/index.css'; // 引入 Element UI 样式文件
import App from './App.vue';

// 关闭 Vue 生产环境提示（可选）
Vue.config.productionTip = false;

// 全局注册 Element UI
Vue.use(ElementUI);

// 创建 Vue 实例并挂载
new Vue({
  render: h => h(App)
}).$mount('#app'); // 替代 el: '#app'，挂载方式更灵活

3.2 按需引入（生产环境推荐）

完整引入会打包所有组件，增加项目体积；按需引入仅打包使用的组件，可大幅减小打包体积，适合中大型项目。

步骤 1：安装依赖插件

安装 babel-plugin-component 插件，用于解析按需引入的组件和样式：

bash 复制代码

npm install babel-plugin-component --save-dev

步骤 2：配置 babel

根据项目配置文件类型，修改 babel.config.js（Vue CLI 4+ 推荐）或 .babelrc：

javascript 复制代码

// babel.config.js
module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'], // 保留原有预设
  plugins: [
    [
      'component',
      {
        libraryName: 'element-ui', // 指定组件库名称
        styleLibraryName: 'theme-chalk' // 自动引入对应样式
      }
    ]
  ]
};

步骤 3：按需引入组件

在 main.js 或组件内按需引入需要的组件（以 Button、Select 为例）：

javascript 复制代码

import Vue from 'vue';
import { Button, Select, Form, Input } from 'element-ui'; // 仅引入需要的组件
import App from './App.vue';

Vue.config.productionTip = false;

// 全局注册单个组件
Vue.use(Button);
Vue.use(Select);
Vue.use(Form);
Vue.use(Input);

new Vue({
  render: h => h(App)
}).$mount('#app');

注意：按需引入时，样式会通过 babel-plugin-component 自动导入，无需手动引入 CSS 文件。

四、使用 Element UI 组件

引入 Element UI 后，可直接在 Vue 模板中使用其组件，以下是核心场景示例。

4.1 基础组件使用（按钮示例）

bash 复制代码

<template>
  <div class="btn-demo">
    <!-- 主要按钮 -->
    <el-button type="primary">主要按钮</el-button>
    <!-- 成功按钮 -->
    <el-button type="success">成功按钮</el-button>
    <!-- 带点击事件的按钮 -->
    <el-button type="warning" @click="handleClick">点击触发事件</el-button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$message.success('按钮点击成功！'); // Element UI 内置消息提示
    }
  }
};
</script>

<style scoped>
.btn-demo {
  margin: 20px;
}
</style>

4.2 实战场景：表单组件（带验证）

表单是业务开发的核心场景，结合 Element UI 表单验证功能，实现用户名 / 密码表单：

bash 复制代码

<template>
  <div class="form-demo" style="padding: 20px;">
    <el-form
      :model="loginForm"
      :rules="loginRules"
      ref="loginFormRef"
      label-width="80px"
    >
      <el-form-item label="用户名" prop="username">
        <el-input v-model="loginForm.username" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
          v-model="loginForm.password"
          type="password"
          placeholder="请输入密码"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    // 自定义用户名验证规则
    const validateUsername = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入用户名'));
      } else if (value.length < 3) {
        callback(new Error('用户名长度不能少于3位'));
      } else {
        callback();
      }
    };

    return {
      loginForm: {
        username: '',
        password: ''
      },
      loginRules: {
        username: [{ validator: validateUsername, trigger: 'blur' }],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 16, message: '密码长度6-16位', trigger: 'blur' }
        ]
      },
      loginFormRef: null
    };
  },
  methods: {
    // 提交表单（带验证）
    submitForm() {
      this.$refs.loginFormRef.validate((valid) => {
        if (valid) {
          console.log('表单验证通过，提交数据：', this.loginForm);
          // 此处可添加接口请求逻辑
          this.$message.success('提交成功！');
        } else {
          this.$message.error('表单验证失败，请检查输入！');
          return false;
        }
      });
    },
    // 重置表单
    resetForm() {
      this.$refs.loginFormRef.resetFields();
    }
  }
};
</script>

五、自定义主题

Element UI 支持通过修改 SCSS 变量自定义主题，满足项目视觉风格需求。

步骤 1：安装主题工具

bash 复制代码

# 全局安装主题生成工具（推荐局部安装，避免全局依赖问题）
npm install element-theme -g
# 安装 chalk 主题（Element UI 默认主题）
npm install element-theme-chalk --save-dev

步骤 2：初始化变量文件

执行以下命令生成主题变量文件 element-variables.scss（项目根目录）：

javascript 复制代码

et -i

若提示 et 命令未找到，改用局部执行：

javascript 复制代码

npx et -i

步骤 3：修改主题变量

打开 element-variables.scss，修改核心变量（示例）：

css 复制代码

// 主色调（默认 #409EFF）
$--color-primary: #1890ff;
// 成功色（默认 #67C23A）
$--color-success: #52c41a;
// 基础字体大小（默认 14px）
$--font-size-base: 14px;
// 组件圆角（默认 4px）
$--border-radius-base: 6px;

步骤 4：编译主题

修改变量后，执行编译命令生成自定义主题文件：

bash 复制代码

et # 全局安装
# 或
npx et # 局部安装

编译完成后，项目根目录会生成 theme 文件夹，包含编译后的 CSS 文件。

步骤 5：引入自定义主题

在 main.js 中替换原有样式引入，改为自定义主题：

javascript 复制代码

// 注释原有默认样式
// import 'element-ui/lib/theme-chalk/index.css';
// 引入自定义主题
import '../theme/index.css';

六、国际化支持

Element UI 内置多语言包，可快速切换界面语言（以切换英文为例）。

步骤 1：引入语言包

javascript 复制代码

import Vue from 'vue';
import ElementUI from 'element-ui';
import enLocale from 'element-ui/lib/locale/lang/en'; // 英文语言包
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'; // 中文语言包
import locale from 'element-ui/lib/locale';

// 全局注册 Element UI，并指定语言
Vue.use(ElementUI, { locale: enLocale }); // 切换为英文
// Vue.use(ElementUI, { locale: zhLocale }); // 切换为中文（默认）

步骤 2：运行时切换语言

若需在项目中动态切换语言（如切换按钮），可调用 locale.use() 方法：

javascript 复制代码

// 切换为中文
this.$locale.use(zhLocale);
// 切换为英文
this.$locale.use(enLocale);

七、常见问题排查

问题 1：样式丢失 / 组件不显示

原因：未正确引入样式文件，或按需引入时 babel-plugin-component 配置错误。
解决：
1. 完整引入时检查 element-ui/lib/theme-chalk/index.css 路径是否正确；
2. 按需引入时确认 babel.config.js 配置完整，且 babel-plugin-component 已安装。

问题 2：`et` 命令提示 "找不到"

原因：全局安装的 element-theme 未加入系统环境变量。
解决：改用局部安装，通过 npx et 执行命令。

问题 3：组件提示 "undefined"

原因：Vue 版本不兼容（如 Vue 3 安装 Element UI）。
解决：切换为 Vue 2.x 或改用 Element Plus。

问题 4：国际化切换无效

总结

Element UI 是 Vue 2 项目的高效 UI 解决方案，完整引入适合快速开发，按需引入适合生产环境，结合自定义主题和国际化可满足不同项目的个性化需求。本文覆盖了从安装到实战的全流程，若需深入使用某类组件（如表格、弹窗、分页），可参考 Element UI 官方文档。

原因：未正确引入 locale 或注册方式错误。
解决：确保 Vue.use(ElementUI, { local

八、生产环境优化
按需引入：仅引入项目使用的组件，减少打包体积；
主题按需编译：仅修改需要的主题变量，避免全量编译；
样式按需加载 ：配合 babel-plugin-component 自动导入组件样式，无需手动引入；
打包优化 ：使用 vue-cli-service build --mode production 打包，开启代码压缩。

ElementUI从入门到实战全攻略

一、环境前提（必看）

二、安装 Element UI

三、引入 Element UI

3.1 完整引入（新手首选）

3.2 按需引入（生产环境推荐）

四、使用 Element UI 组件

4.1 基础组件使用（按钮示例）

4.2 实战场景：表单组件（带验证）

五、自定义主题

六、国际化支持

七、常见问题排查

问题 1：样式丢失 / 组件不显示

问题 2：et 命令提示 "找不到"

问题 3：组件提示 "undefined"

问题 4：国际化切换无效

总结

八、生产环境优化

问题 2：`et` 命令提示 "找不到"