ElementUI 实战-CFANZ编程社区

学习目录

Vue.js 基础：在学习 ElementUI 之前，你需要先掌握 Vue.js 的基础知识，包括 Vue.js 的核心概念、指令、组件等。
ElementUI 组件：ElementUI 包含很多常用的 UI 组件，如按钮、表单、表格、弹窗等，你需要针对每个组件进行深入的学习，了解组件的使用方法、属性、事件等。
ElementUI 主题：ElementUI 可以自定义主题，你需要了解如何配置主题，如何使用自定义的主题。
ElementUI 实战：通过实际项目的开发，将 ElementUI 应用于项目中，加深对 ElementUI 的理解和熟练度。
ElementUI 扩展：在掌握了 ElementUI 的基础之后，你可以尝试自己编写扩展组件，或者对现有组件进行二次开发，提高自己的技能水平。

本文对前面几个标题也做了一定的回顾。

一、前言

ElementUI 是基于 Vue.js 的一款 UI 组件库，提供了丰富的组件和样式，可以帮助我们快速构建美观且功能强大的前端界面。在实际项目开发中，合理地使用 ElementUI 可以提高开发效率，减少代码量，同时也可以提高项目的用户体验。

本篇博客将结合一个实际项目的开发经验，介绍如何在实际项目中使用 ElementUI，包括如何引入 ElementUI、如何使用常用的组件、如何进行自定义主题等方面，希望能够帮助读者更好地理解和应用 ElementUI。

二、引入 ElementUI

首先，我们需要在项目中引入 ElementUI。ElementUI 提供了两种引入方式：CDN 引入和本地引入。这里我们选择本地引入的方式，具体步骤如下：

安装 ElementUI

我们可以通过 npm 或者 yarn 安装 ElementUI，这里以 npm 为例：

npm install element-ui --save

引入 ElementUI

在项目的入口文件（比如 main.js）中，引入 ElementUI 并将其注册为 Vue 组件：

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

Vue.use(ElementUI)

这里我们还需要引入 ElementUI 的样式文件，否则我们将无法正确地显示 ElementUI 的组件。

到此为止，我们已经成功地引入了 ElementUI。

三、使用 ElementUI 组件

接下来，我们将介绍如何使用 ElementUI 常用的组件。

按钮

ElementUI 中的按钮组件非常丰富，可以根据不同的需求选择不同的按钮类型、大小和样式。比如，我们可以使用以下代码创建一个基本的按钮：

<el-button>默认按钮</el-button>

按钮的类型、大小和样式都可以通过属性进行设置，比如：

<el-button type="primary" size="small">小型主要按钮</el-button>

表单

表单是 Web 应用程序中的常见组件之一，ElementUI 提供了丰富的表单组件，包括输入框、下拉框、单选框、多选框、日期选择器等等。这里我们以输入框为例：

<el-form>
  <el-form-item label="用户名">
    <el-input v-model="username"></el-input>
  </el-form-item>
  <el-form-item label="密码">
    <el-input type="password" v-model="password"></el-input>
  </el-form-item>
</el-form>

这里我们使用了 el-form 和 el-form-item 组件来创建一个表单，其中 el-input 组件用于创建输入框。v-model 指令用于将输入框的值与 Vue 实例中的数据进行双向绑定。

表格

表格是展示数据的常见组件，ElementUI 提供了一个强大的表格组件，可以支持排序、分页、筛选等功能。以下是一个简单的表格示例：

<el-table :data="tableData">
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
  <el-table-column prop="address" label="地址"></el-table-column>
</el-table>

这里我们使用了 el-table 和 el-table-column 组件来创建一个表格，其中 :data 属性用于指定表格的数据源，prop 属性用于指定表格每一列对应的数据字段，label 属性用于指定表头的文本。

除了基本的表格组件外，ElementUI 还提供了丰富的表格插件和扩展功能，如可编辑表格、树形表格、合并表格等等，可以根据具体需求进行选择和使用。

弹窗

弹窗是常见的交互组件之一，ElementUI 提供了一个简单易用的弹窗组件 el-dialog，可以帮助我们快速创建弹窗。以下是一个弹窗示例：

<el-button @click="showDialog">打开弹窗</el-button>
<el-dialog :visible.sync="dialogVisible">
  <span>这是一个弹窗</span>
</el-dialog>

这里我们使用了 el-button 和 el-dialog 组件来创建一个按钮和一个弹窗，@click 事件用于监听按钮的点击事件，showDialog 方法用于显示弹窗，:visible.sync 属性用于实现弹窗的显示和隐藏。

其他组件

除了上述组件外，ElementUI 还提供了许多其他常见的组件，如下拉框、单选框、多选框、日期选择器、分页器等等。这些组件都具有丰富的属性和方法，可以根据具体需求进行选择和使用。

四、自定义主题

ElementUI 的样式是基于 Sass 编写的，可以通过修改 Sass 变量来修改样式。如果我们想要自定义 ElementUI 的主题，可以通过修改 Sass 变量来实现。

安装 Sass

首先，我们需要安装 Sass。可以通过 npm 或者 yarn 安装 Sass，这里以 npm 为例：

npm install sass-loader node-sass --save-dev

创建自定义主题

然后，我们可以在项目中创建一个自定义主题的 Sass 文件，比如 src/styles/element-variables.scss，然后在其中定义我们需要修改的 Sass 变量，比如：

$--color-primary: #1890ff;
$--font-size-base: 14px;

这里我们将主题的主要颜色修改为 #1890ff，将字体大小修改为 14px。

引入自定义主题

最后，我们需要在项目的入口文件中引入自定义主题文件，并将其应用到 ElementUI 的样式中。具体代码如下：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import '@/styles/element-variables.scss'

Vue.use(ElementUI, {
  size: 'medium',
  customTheme: {
    '--color-primary': '#1890ff',
    '--font-size-base': '14px'
  }
})

这里我们通过 Vue.use 的第二个参数来设置 ElementUI 的配置项，包括组件的默认大小和自定义主题。其中 customTheme 属性用于指定自定义主题的 Sass 变量。

总之，通过上述步骤，我们可以轻松地自定义 ElementUI 的主题，以满足项目的需求。

五、总结

通过本篇文章介绍，可以掌握了常用的组件和自定义主题的方法。在实际项目开发中，合理地使用 ElementUI 可以提高开发效率，减少代码量，同时也可以提高项目的用户体验。