腾讯elementui

Element UI 简介

Element UI 是由饿了么前端团队开发的一款基于 Vue.js 的桌面端组件库，现由腾讯团队维护（部分版本称为 Element Plus 并适配 Vue 3）。它提供了丰富的 UI 组件（如表格、表单、弹窗等），适合快速构建企业级中后台产品。

核心特性

• 组件丰富：包含按钮、表单、表格、弹窗、导航等 50+ 常用组件。
• 设计规范：遵循统一的视觉风格，支持自定义主题。
• Vue 生态兼容：完美支持 Vue 2/Vue 3（Element Plus）。
• 国际化：内置多语言支持。

安装与使用

1. 安装（以 Vue 2 为例）：
   通过 npm 或 yarn 安装：

   npm install element-ui --save
   # 或
   yarn add element-ui

2. 全局引入：
   在 main.js 中导入组件和样式：

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

3. 按需引入（推荐）：
   使用 babel-plugin-component 减少体积：

   

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

常用组件示例

• 按钮：

  <el-button type="primary">主要按钮</el-button>

• 表单：

  <el-form :model="formData">
    <el-form-item label="用户名">
      <el-input v-model="formData.username"></el-input>
    </el-form-item>
  </el-form>

• 表格：

  

  <el-table :data="tableData">
    <el-table-column prop="date" label="日期"></el-table-column>
  </el-table>

主题定制

通过 SCSS 变量修改默认样式：

1. 安装主题生成工具：

   npm install element-theme -g

2. 修改变量文件后编译：

   et --init  # 生成配置文件
   et         # 编译主题

注意事项

• Vue 3 用户：需使用 Element Plus（安装命令：npm install element-plus）。
• 兼容性：Element UI 仅支持现代浏览器（IE 10+ 需额外配置）。
• 文档参考：
  • Element UI 官方文档
  • Element Plus 文档

通过以上步骤，可快速集成 Element UI 到 Vue 项目中，高效开发界面。