elementui app
ElementUI 应用开发指南
ElementUI 是一套基于 Vue.js 的桌面端组件库，适合快速构建企业级后台管理系统。以下是其核心应用方法和常见实践。
安装与配置
使用 npm 或 yarn 安装 ElementUI：
npm install element-ui --save
# 或
yarn add element-ui在 Vue 项目中全局引入：
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);按需引入（推荐通过 babel-plugin-component 优化体积）：
import { Button, Select } from 'element-ui';
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);常用组件示例
表单组件
<el-form :model="formData" label-width="80px">
<el-form-item label="用户名">
<el-input v-model="formData.username"></el-input>
</el-form-item>
<el-form-item label="密码">
<el-input type="password" v-model="formData.password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
</el-form-item>
</el-form>表格组件
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="日期" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>主题定制
通过覆盖 SCSS 变量自定义主题：
-
安装
sass-loader和node-sass：npm install sass-loader node-sass --save-dev -
创建主题文件（如
theme.scss）：
/* 修改主题色 */ $--color-primary: #ff4500;
/ 引入 ElementUI 默认样式 / @import "~element-ui/packages/theme-chalk/src/index";
3. 在项目中引入该文件（替换原 CSS 引入）：
```javascript
import './theme.scss';国际化支持
切换语言为中文（默认）或其他语言：
import Vue from 'vue';
import ElementUI from 'element-ui';
import locale from 'element-ui/lib/locale/lang/zh-CN';
Vue.use(ElementUI, { locale });常见问题解决
表单验证
使用 rules 属性定义验证规则：
<el-form :model="formData" :rules="rules" ref="form">
<el-form-item label="邮箱" prop="email">
<el-input v-model="formData.email"></el-input>
</el-form-item>
</el-form>rules: {
email: [
{ required: true, message: '请输入邮箱', trigger: 'blur' },
{ type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
]
}响应式布局
结合 el-row 和 el-col 实现栅格系统：
<el-row :gutter="20">
<el-col :span="6"><div>左侧内容</div></el-col>
<el-col :span="18"><div>右侧内容</div></el-col>
</el-row>注意事项
- 兼容性要求：ElementUI 基于 Vue 2.x，若使用 Vue 3.x 需迁移至 Element Plus。
- 性能优化：按需引入组件可显著减少打包体积。
- 版本管理：建议锁定版本号以避免升级导致的兼容性问题。
