【前端】Vue3与Element Plus结合使用的超详细教程：从入门到精通

Moss前沿AI

【OpenAI】获取OpenAI API KEY的两种方式，开发者必看全方面教程！

【VScode】VSCode中的智能AI-GPT编程利器，全面揭秘ChatMoss & ChatGPT中文版

【GPT-o1系列模型！支持Open API调用、自定义助手、文件上传等强大功能，助您提升工作效率！】>>> - CodeMoss & ChatGPT-AI中文版

一、教程概述

1.1 目标读者

本教程适用于具备基本Vue3知识的前端开发者，特别是那些希望通过Element Plus提升项目UI质量和开发效率的开发者。

1.2 学习目标

• 了解Element Plus与Vue3的基本集成方式
• 掌握常用Element Plus组件的使用方法
• 学会自定义Element Plus的样式以满足项目需求
• 掌握Element Plus在实际项目中的最佳实践

二、为什么选择Vue3与Element Plus

2.1 Vue3的优势

Vue3相比于Vue2在性能、体积和功能上都有显著提升。其组合式API（Composition API）使得代码更具可维护性和复用性，适合构建大型复杂的应用。

2.2 Element Plus的优势

Element Plus是基于Vue3的UI组件库，拥有丰富且高质量的组件，支持TypeScript，且社区活跃。其组件设计美观，能够帮助开发者迅速构建优雅的用户界面。

2.3 二者结合的优势

将Vue3与Element Plus结合使用，不仅提升了开发效率，还保证了项目的UI一致性和用户体验。丰富的组件库减少了重复造轮子的时间，使开发者能够专注于业务逻辑的实现。

三、环境搭建

在开始之前，确保您的开发环境已经安装了Node.js和npm（或yarn）。

3.1 创建Vue3项目

使用Vue CLI或Vite创建一个Vue3项目。这里以Vite为例：

npm init vite@latest my-element-plus-app --template vue
cd my-element-plus-app
npm install

3.2 安装Element Plus

在项目目录下运行以下命令安装Element Plus：

npm install element-plus

3.3 引入Element Plus

在main.js中引入Element Plus：

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')

四、Element Plus常用组件使用详解

Element Plus提供了丰富的组件，本文将重点介绍几种常用组件的使用方法，包括按钮（Button）、表单（Form）、表格（Table）和弹窗（Dialog）。

4.1 按钮（Button）

按钮是最基础的交互元素，Element Plus提供了多种按钮类型和状态。

基本使用：

<template>
  <el-button type="primary">主要按钮</el-button>
  <el-button type="success">成功按钮</el-button>
  <el-button type="warning">警告按钮</el-button>
  <el-button type="danger">危险按钮</el-button>
  <el-button type="info">信息按钮</el-button>
</template>

禁用状态和加载状态：

<el-button type="primary" :disabled="isDisabled">禁用按钮</el-button>
<el-button type="primary" :loading="loading">加载中</el-button>

<script setup>
import {
    ref } from 'vue'

const isDisabled = ref(false)
const loading = ref(true)
</script>

4.2 表单（Form）

表单是用户输入的主要方式，Element Plus提供了丰富的表单组件和验证机制。

基本表单：

<template>
  <el-form :model="form" :rules="rules" ref="formRef" label-width="120px">
    <el-form-item label="用户名" prop="name">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    
    <el-form-item label="密码" prop="password">
      <el-input type="password" v-model="form.password"></el-input>
    </el-form-item>
    
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
      <el-button @click="resetForm">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import {
    ref } from 'vue'
import {
    ElForm } from 'element-plus'

const formRef = ref(null)
const form = ref({
   
  name: '',
  password: ''
})

const rules = {
   
  name: [
    {
    required: true, message: '请输入用户名', trigger: 'blur' }
  ],
  password: [
    {
    required: true, message: '请输入密码', trigger: 'blur' },
    {
    min: 6, message: '密码至少6位', trigger: 'blur' }
  ]
}

const submitForm = () => {
   
  formRef.value.validate((valid) => {
   
    if (valid) {
   
      console.log('提交成功', form.value)
    } else {
   
      console.log('验证失败')
      return false
    }
  })
}

const resetForm = () => {
   
  formRef.value.resetFields()
}