13.1 Element Plus入门 -TypeScript和Vue从入门到精通(四)

当前位置:　首页>> 技术小册>> TypeScript和Vue从入门到精通(四)

### 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的示例命令：

```bash
npm install element-plus --save
```

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

```bash
yarn add element-plus
```

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

```javascript
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提供了多种样式的按钮供开发者使用。以下是一个简单的按钮使用示例：

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

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

##### 2. 表单（Form）

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

```vue
<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>

export default {
  setup() {
    const form = ref({
      username: ''
    })
    const rules = {
      username: [
        { required: true, message: '请输入用户名', trigger: 'blur' }
      ]
    }

const resetForm = (formRef) => {
      this.$refs[formRef].resetFields();
    }

return {
      form,
      rules,
      submitForm,
      resetForm
    }
  }
}
</script>
```

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

##### 3. 表格（Table）

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

```vue
<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>

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（如果你还没有安装的话）：

```bash
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的功能远不止于此，建议读者在实际项目中深入探索其更多高级特性和用法。

该分类下的相关小册推荐：

TypeScript和Vue从入门到精通(三)

Vue面试指南

Vue源码完全解析

Vue.js从入门到精通(二)

Vue原理与源码解析

TypeScript和Vue从入门到精通(五)

Vue.js从入门到精通(一)

Vue3技术解密

Vue.js从入门到精通(四)

VUE组件基础与实战

TypeScript和Vue从入门到精通(一)

Vue.js从入门到精通(三)