13.1 Element Plus入门

在Vue.js的生态系统中，UI组件库扮演着至关重要的角色，它们不仅加速了开发流程，还确保了应用界面的统一性和美观性。随着Vue 3的发布，许多流行的Vue UI组件库也相继推出了支持Vue 3的版本，其中Element Plus便是Element UI的Vue 3继任者。Element Plus继承并扩展了Element UI的优秀设计理念和丰富的组件库，为开发者提供了更多可能性。本章将带领读者从零开始，逐步掌握Element Plus的基本使用，包括安装、配置、常用组件的使用以及定制主题等。

13.1.1 Element Plus简介

Element Plus是一个基于Vue 3的桌面端组件库，它旨在通过提供一套高质量、易于使用的Vue组件，帮助开发者快速构建网站和应用程序。Element Plus不仅继承了Element UI的设计语言（如色彩、字体、间距等），还在此基础上进行了优化和扩展，以更好地适应Vue 3的响应式系统和Composition API。

Element Plus的组件种类丰富，包括但不限于按钮（Button）、表单（Form）、对话框（Dialog）、表格（Table）、下拉菜单（Dropdown）、导航菜单（Menu）等，几乎覆盖了日常开发中所需的所有基础UI元素。此外，Element Plus还提供了强大的国际化支持，让开发者可以轻松地为应用添加多语言支持。

13.1.2 安装Element Plus

在Vue 3项目中安装Element Plus非常简单，通常可以通过npm或yarn等包管理器来完成。以下是通过npm安装Element Plus的示例命令：

npm install element-plus --save

或者，如果你使用的是yarn，则可以使用以下命令：

yarn add element-plus

安装完成后，你需要在你的Vue项目中全局或局部引入Element Plus。全局引入通常在你的入口文件（如main.js或main.ts）中进行，示例如下：

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

通过上述代码，你就在Vue项目中全局引入了Element Plus及其样式文件，之后就可以在你的组件中直接使用Element Plus提供的任何组件了。

13.1.3 常用组件使用

Element Plus提供了众多实用的组件，下面将介绍几个常用的组件及其基本使用方法。

1. 按钮（Button）

按钮是UI中最基本的元素之一，Element Plus提供了多种样式的按钮供开发者使用。以下是一个简单的按钮使用示例：

<template>
  <el-button type="primary">主要按钮</el-button>
  <el-button>默认按钮</el-button>
  <el-button type="text">文本按钮</el-button>
</template>

通过type属性，你可以改变按钮的样式（如主要按钮、成功按钮、警告按钮等）。

2. 表单（Form）

表单是Web应用中不可或缺的部分，Element Plus的表单组件支持数据双向绑定和表单验证。以下是一个简单的表单使用示例：

<template>
  <el-form :model="form" :rules="rules" ref="formRef">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('formRef')">提交</el-button>
      <el-button @click="resetForm('formRef')">重置</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
import { ref } from 'vue'
export default {
  setup() {
    const form = ref({
      username: ''
    })
    const rules = {
      username: [
        { required: true, message: '请输入用户名', trigger: 'blur' }
      ]
    }
    const submitForm = (formRef) => {
      this.$refs[formRef].validate((valid) => {
        if (valid) {
          alert('提交成功!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
    const resetForm = (formRef) => {
      this.$refs[formRef].resetFields();
    }
    return {
      form,
      rules,
      submitForm,
      resetForm
    }
  }
}
</script>

在上面的示例中，我们创建了一个包含用户名输入框的表单，并通过rules属性定义了表单验证规则。通过@click事件监听器，我们绑定了提交和重置表单的方法。

3. 表格（Table）

表格是展示数据的重要组件，Element Plus的表格组件支持排序、筛选、分页等功能。以下是一个简单的表格使用示例：

<template>
  <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>
</template>
<script>
import { ref } from 'vue'
export default {
  setup() {
    const tableData = ref([
      { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
      // ... 其他数据项
    ])
    return {
      tableData
    }
  }
}
</script>

在上面的示例中，我们创建了一个包含三列的表格，并通过:data属性绑定了表格数据。

13.1.4 定制主题

Element Plus支持通过Sass变量来定制主题，以满足不同项目的视觉需求。要定制主题，你首先需要安装Sass及其Loader（如果你还没有安装的话）：

npm install sass sass-loader --save-dev
# 或者使用yarn
yarn add sass sass-loader --dev

然后，你可以在你的项目中创建一个Sass文件（如element-variables.scss），并在这个文件中覆盖Element Plus的默认Sass变量。最后，在你的入口文件中引入这个Sass文件。

请注意，由于Element Plus是基于Vue 3和Composition API构建的，因此在Vue 3项目中定制主题时，可能需要特别注意与Vue 2项目的差异。

13.1.5 总结

本章介绍了Element Plus的基本使用方法，包括安装、配置、常用组件的使用以及定制主题等。通过学习本章内容，读者可以初步掌握Element Plus的使用技巧，为后续的Vue 3项目开发打下坚实的基础。当然，Element Plus的功能远不止于此，建议读者在实际项目中深入探索其更多高级特性和用法。