elementui和

ElementUI 简介

ElementUI 是一套基于 Vue.js 的桌面端组件库，由饿了么前端团队开发并开源。它提供了丰富的 UI 组件（如表格、表单、弹窗等），适用于快速构建企业级中后台管理系统。

核心特点

• Vue 2 兼容：专为 Vue 2 设计，需搭配 Vue 2 使用。
• 组件丰富：包含表单、表格、导航、通知等 50+ 常用组件。
• 主题定制：支持通过 SCSS 变量或在线主题生成工具修改样式。
• 国际化：内置多语言支持，可切换中英文等语言包。

安装与使用

通过 npm 或 yarn 安装：

npm install element-ui --save

在 Vue 项目中全局引入：

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

Vue.use(ElementUI);

示例代码

实现一个按钮和弹窗：

<template>
  <div>
    <el-button type="primary" @click="openDialog">点击弹窗</el-button>
    <el-dialog title="提示" :visible.sync="dialogVisible">
      <span>这是一个弹窗</span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false
    };
  },
  methods: {
    openDialog() {
      this.dialogVisible = true;
    }
  }
};
</script>

注意事项

• Vue 3 兼容性：ElementUI 不支持 Vue 3，需使用其升级版 Element Plus。
• 按需引入：若需优化体积，可通过 babel-plugin-component 插件按需加载组件。