elementui指南

Element UI 指南

Element UI 是一套基于 Vue.js 的桌面端组件库，提供丰富的 UI 组件和交互功能，适合快速开发企业级中后台产品。

安装与引入

通过 npm 安装 Element UI：

npm install element-ui -S

在 Vue 项目中全局引入：

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

Vue.use(ElementUI);

按需引入（推荐）：

import { Button, Select } from 'element-ui';
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);

常用组件示例

表单组件（ElForm）：

<el-form :model="form" label-width="80px">
  <el-form-item label="用户名">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
  <el-form-item label="活动区域">
    <el-select v-model="form.region" placeholder="请选择">
      <el-option label="区域一" value="shanghai"></el-option>
    </el-select>
  </el-form-item>
</el-form>

表格组件（ElTable）：

<el-table :data="tableData" style="width: 100%">
  <el-table-column prop="date" label="日期"></el-table-column>
  <el-table-column prop="name" label="姓名"></el-table-column>
</el-table>

主题定制

通过修改变量覆盖默认主题：

/* 在项目中新建 SCSS 文件 */
$--color-primary: #FF0000;
@import "~element-ui/packages/theme-chalk/src/index";

使用命令行工具生成自定义主题：

npm i element-theme -g
et -i

国际化支持

设置语言为中文：

import Vue from 'vue';
import ElementUI from 'element-ui';
import locale from 'element-ui/lib/locale/lang/zh-CN';

Vue.use(ElementUI, { locale });

切换为英文：

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

最佳实践

组件按需加载优化打包体积：

// babel.config.js
module.exports = {
  plugins: [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

表单验证规则示例：

rules: {
  name: [
    { required: true, message: '请输入名称', trigger: 'blur' },
    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
  ]
}

资源与工具

• 官方文档：https://element.eleme.io
• GitHub 仓库：https://github.com/ElemeFE/element
• 主题生成器：https://elementui.github.io/theme-chalk-preview