elementui实战
安装与引入
ElementUI 是基于 Vue.js 的组件库，需先安装 Vue 环境。通过 npm 或 yarn 安装 ElementUI：
npm install element-ui --save
# 或
yarn add element-ui在 main.js 中全局引入：
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);基础组件使用
常用组件如按钮、表单、表格等可直接调用。例如按钮组件：
<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>表格与分页
表格需定义 columns 和数据源，配合分页组件：
<el-table :data="tableData">
<el-table-column prop="date" label="日期"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
</el-table>
<el-pagination
@current-change="handlePageChange"
:current-page="currentPage"
:page-size="10"
layout="total, prev, pager, next"
:total="total">
</el-pagination>主题定制
通过修改变量覆盖默认主题。在项目中新建 SCSS 文件（如 element-variables.scss）：
$--color-primary: #ff4500;
@import "~element-ui/packages/theme-chalk/src/index";在 webpack 配置中加载该文件替换默认样式。
表单验证
结合 rules 属性实现验证：
<el-form :rules="rules">
<el-form-item prop="email" label="邮箱">
<el-input v-model="form.email"></el-input>
</el-form-item>
</el-form>规则定义在数据中：
rules: {
email: [
{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
]
}常见问题解决
- 样式冲突：检查 CSS 加载顺序，确保 ElementUI 样式在自定义样式前引入。
- 按需引入：使用
babel-plugin-component减少体积：npm install babel-plugin-component -D配置
.babelrc：{ "plugins": [ ["component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" }] ] }
