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

JAY.LIN 收录于前端

2024-12-03 约 4849 字预计阅读 10 分钟

https://bing.ee123.net/img/rand?artid=144205804

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

Moss前沿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()
}
</script>

4.3 表格（Table）

表格用于展示大量数据，Element Plus的Table组件功能强大，支持多种操作。

基本表格：

<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 setup>
import { ref } from 'vue'

const tableData = ref([
  {
    date: '2024-04-27',
    name: '王小明',
    address: '上海市普陀区金沙江路'
  },
  {
    date: '2024-04-26',
    name: '李雷',
    address: '北京市海淀区西二旗'
  },
  // 更多数据...
])
</script>

排序和筛选：

<template>
  <el-table :data="tableData" style="width: 100%" @sort-change="handleSort">
    <el-table-column prop="date" label="日期" width="180" sortable></el-table-column>
    <el-table-column prop="name" label="姓名" width="180" sortable></el-table-column>
    <el-table-column prop="address" label="地址" sortable></el-table-column>
  </el-table>
</template>

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

const tableData = ref([
  // 数据同上
])

const handleSort = (obj) => {
  console.log(obj.prop, obj.order)
}
</script>

4.4 弹窗（Dialog）

弹窗用于提示用户或获取用户输入，Element Plus提供了功能丰富的Dialog组件。

基本弹窗：

<template>
  <el-button type="text" @click="dialogVisible = true">打开弹窗</el-button>
  
  <el-dialog
    title="提示"
    :visible.sync="dialogVisible"
    width="30%"
    @close="handleClose"
  >
    <span>这是一段内容</span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
    </span>
  </el-dialog>
</template>

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

const dialogVisible = ref(false)

const handleClose = () => {
  console.log('弹窗关闭')
}
</script>

五、样式定制

Element Plus提供了多种方式定制样式，以满足不同项目的需求。

5.1 全局主题定制

通过修改Element Plus的全局Sass变量，可以轻松定制主题颜色等样式。

步骤：

安装Sass依赖：

npm install -D sass

创建 variables.scss 文件，覆盖默认变量：

// variables.scss
$--color-primary: #409EFF;
$--color-success: #67C23A;
$--color-warning: #E6A23C;
$--color-danger: #F56C6C;
$--color-info: #909399;

在 main.js 中引入自定义变量：

import 'element-plus/theme-chalk/src/index.scss'
import './variables.scss'

5.2 按需加载和按需定制

通过按需加载，可以减少项目的体积。同时可以使用Babel插件或Vite插件进行自动按需加载。

使用Vite插件：

安装插件：

npm install -D unplugin-vue-components unplugin-auto-import

配置 vite.config.js ：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

5.3 自定义组件样式

可以通过覆盖CSS变量或使用深度选择器自定义单个组件的样式。

示例：自定义按钮颜色

<template>
  <el-button class="custom-button" type="primary">自定义按钮</el-button>
</template>

<style scoped>
.custom-button {
  background-color: #FF5722;
  border-color: #FF5722;
}
</style>

六、最佳实践

为了在项目中高效地使用Element Plus，以下是一些最佳实践建议：

6.1 组件按需引入

避免全局引入所有组件，使用按需引入的方式，减少项目体积，提高加载速度。

6.2 全局配置

根据项目需求，配置Element Plus的全局属性，如国际化、多语言支持等，提升用户体验。

6.3 主题定制与一致性

通过统一的主题配置，确保项目中所有组件的风格一致，提高整体视觉效果。

6.4 响应式设计

结合Element Plus的栅格系统和响应式组件，确保项目在不同设备上的良好展示效果。

6.5 性能优化

避免不必要的重渲染，合理使用缓存和懒加载技术，提升项目性能。

七、实战案例：构建一个简单的管理后台

为了更好地理解Vue3与Element Plus的结合使用，本文将通过一个简单的管理后台案例，展示如何应用前述知识。

7.1 项目结构

my-element-plus-app/
├── public/
├── src/
│   ├── components/
│   │   ├── Header.vue
│   │   ├── Sidebar.vue
│   │   └── Content.vue
│   ├── views/
│   │   ├── Dashboard.vue
│   │   ├── Users.vue
│   │   └── Settings.vue
│   ├── App.vue
│   ├── main.js
│   └── router.js
├── variables.scss
├── vite.config.js
├── package.json
└── ...

7.2 创建基础布局

Header.vue

<template>
  <el-header height="60px" class="header">
    <div class="logo">管理后台</div>
    <el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect">
      <el-menu-item index="1">首页</el-menu-item>
      <el-menu-item index="2">用户管理</el-menu-item>
      <el-menu-item index="3">设置</el-menu-item>
    </el-menu>
  </el-header>
</template>

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

const activeIndex = ref('1')

const handleSelect = (key) => {
  console.log('选中菜单项：', key)
}
</script>

<style scoped>
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #ffffff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.logo {
  font-size: 20px;
  font-weight: bold;
  margin-left: 20px;
}
</style>

Sidebar.vue

<template>
  <el-aside width="200px" class="aside">
    <el-menu default-active="1" class="el-menu-vertical-demo">
      <el-menu-item index="1">首页</el-menu-item>
      <el-menu-item index="2">用户管理</el-menu-item>
      <el-menu-item index="3">设置</el-menu-item>
    </el-menu>
  </el-aside>
</template>

<script setup></script>

<style scoped>
.aside {
  background-color: #f5f7fa;
}
</style>

Content.vue

<template>
  <el-main class="main-content">
    <router-view></router-view>
  </el-main>
</template>

<script setup></script>

<style scoped>
.main-content {
  padding: 20px;
  background-color: #f0f2f5;
}
</style>

App.vue

<template>
  <el-container style="height: 100vh;">
    <Header />
    <el-container>
      <Sidebar />
      <Content />
    </el-container>
  </el-container>
</template>

<script setup>
import Header from './components/Header.vue'
import Sidebar from './components/Sidebar.vue'
import Content from './components/Content.vue'
</script>

<style>
body, html, #app {
  margin: 0;
  padding: 0;
}
</style>

router.js

import { createRouter, createWebHistory } from 'vue-router'
import Dashboard from './views/Dashboard.vue'
import Users from './views/Users.vue'
import Settings from './views/Settings.vue'

const routes = [
  { path: '/', name: 'Dashboard', component: Dashboard },
  { path: '/users', name: 'Users', component: Users },
  { path: '/settings', name: 'Settings', component: Settings },
]

const router = createRouter({
  history: createWebHistory(),
  routes,
})

export default router

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import './variables.scss'

const app = createApp(App)
app.use(router)
app.use(ElementPlus)
app.mount('#app')

7.3 创建视图组件

Dashboard.vue

<template>
  <div>
    <el-card>
      <h2>仪表盘</h2>
      <p>欢迎来到管理后台！</p>
    </el-card>
  </div>
</template>

<script setup></script>

<style scoped>
h2 {
  margin-bottom: 20px;
}
</style>

Users.vue

<template>
  <div>
    <el-button type="primary" @click="openDialog">新增用户</el-button>
    <el-table :data="users" style="width: 100%" stripe>
      <el-table-column prop="id" label="ID" width="50"></el-table-column>
      <el-table-column prop="name" label="姓名" width="150"></el-table-column>
      <el-table-column prop="email" label="邮箱"></el-table-column>
      <el-table-column label="操作" width="120">
        <template #default="scope">
          <el-button type="text" size="small" @click="editUser(scope.row)">编辑</el-button>
          <el-button type="text" size="small" @click="deleteUser(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <el-dialog :visible.sync="dialogVisible" title="新增用户">
      <el-form :model="form" label-width="80px">
        <el-form-item label="姓名">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="form.email"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

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

const users = ref([
  { id: 1, name: '张三', email: 'zhangsan@example.com' },
  { id: 2, name: '李四', email: 'lisi@example.com' },
])

const dialogVisible = ref(false)
const form = ref({ name: '', email: '' })

const openDialog = () => {
  dialogVisible.value = true
}

const submitForm = () => {
  if (form.value.name && form.value.email) {
    users.value.push({
      id: users.value.length + 1,
      name: form.value.name,
      email: form.value.email,
    })
    dialogVisible.value = false
    form.value = { name: '', email: '' }
  } else {
    // 添加表单验证提示
  }
}

const editUser = (user) => {
  console.log('编辑用户', user)
  // 实现编辑逻辑
}

const deleteUser = (user) => {
  users.value = users.value.filter(u => u.id !== user.id)
}
</script>

<style scoped>
.dialog-footer {
  text-align: right;
}
</style>

Settings.vue

<template>
  <div>
    <el-card>
      <h2>设置</h2>
      <el-form :model="settings" label-width="120px">
        <el-form-item label="语言">
          <el-select v-model="settings.language" placeholder="请选择">
            <el-option label="中文" value="zh"></el-option>
            <el-option label="英文" value="en"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="主题">
          <el-select v-model="settings.theme" placeholder="请选择">
            <el-option label="默认" value="default"></el-option>
            <el-option label="暗色" value="dark"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="saveSettings">保存</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

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

const settings = ref({
  language: 'zh',
  theme: 'default',
})

const saveSettings = () => {
  console.log('保存设置', settings.value)
  // 实现保存逻辑
}
</script>

<style scoped>
h2 {
  margin-bottom: 20px;
}
</style>

7.4 运行项目

确保所有组件和路由配置正确后，运行以下命令启动项目：

npm run dev

打开浏览器访问 http://localhost:3000 ，即可看到构建好的管理后台。