elementui插件
ElementUI 简介
ElementUI 是一套基于 Vue.js 的桌面端组件库，由饿了么前端团队开发并维护。它提供了丰富的 UI 组件（如按钮、表单、表格等），适合快速开发中后台管理系统。
安装与使用
通过 npm 安装
npm install element-ui -S全局引入
在 Vue 项目的入口文件（如 main.js）中引入：
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);按需引入
借助 babel-plugin-component 仅引入需要的组件：
npm install babel-plugin-component -D修改 babel.config.js：
module.exports = {
plugins: [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
};然后在代码中按需引入组件：
import { Button, Select } from 'element-ui';
Vue.use(Button).use(Select);常用组件示例
表单组件
<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>
<el-button type="primary" @click="submit">提交</el-button>
</el-form-item>
</el-form>表格组件
<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 变量实现主题定制。在项目中创建 element-variables.scss 文件：
$--color-primary: #ff4500; /* 修改主题色 */
@import "~element-ui/packages/theme-chalk/src/index";在入口文件中引入该文件：
import './element-variables.scss';国际化支持
ElementUI 默认支持中文，切换为英文：
import Vue from 'vue';
import ElementUI from 'element-ui';
import locale from 'element-ui/lib/locale/lang/en';
Vue.use(ElementUI, { locale });注意事项
- 兼容性：支持 Vue 2.x，不兼容 Vue 3.x（需使用 Element Plus）。
- 版本管理：建议锁定版本号以避免升级导致的兼容问题。
官方资源
- 文档：ElementUI 官方文档
- GitHub：element-ui
