elementui菜鸟

ElementUI 入门指南

ElementUI 是一套基于 Vue.js 的桌面端组件库，适合快速开发企业级后台产品。以下为新手入门的关键要点：

安装与引入

通过 npm 安装：

npm install element-ui -S

在 Vue 项目中全局引入：

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-button type="success">成功按钮</el-button>

表单组件示例：

<el-form :model="formData">
  <el-form-item label="用户名">
    <el-input v-model="formData.username"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm">提交</el-button>
  </el-form-item>
</el-form>

布局系统

使用 Layout 组件快速搭建页面框架：

<el-container>
  <el-header>顶部导航</el-header>
  <el-container>
    <el-aside width="200px">侧边栏</el-aside>
    <el-main>主内容区</el-main>
  </el-container>
</el-container>

主题定制

通过修改变量覆盖默认主题：

/* 在自定义样式文件中 */
$--color-primary: #ff6600;
@import "~element-ui/packages/theme-chalk/src/index";

常见问题解决

表单验证不生效时检查：

• 确保给 el-form 设置了 rules 属性
• 每个 el-form-item 的 prop 需与 rules 中的字段对应
• 表单数据对象需初始化对应字段

表格数据不更新时：

• 确保数据源是响应式的
• 对于动态数据，使用 this.$set 或数组的变异方法

学习资源推荐

官方文档：

• 中文文档：https://element.eleme.cn/#/zh-CN
• GitHub 仓库：https://github.com/ElemeFE/element

实践建议：

• 从基础组件开始逐步练习
• 参考官方示例代码
• 使用 Vue Devtools 调试组件状态
• 结合 Vuex 管理复杂状态