0
0

【前端】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
npminstall

3.2 安装Element Plus

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

npminstall 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-buttontype="primary">主要按钮</el-button><el-buttontype="success">成功按钮</el-button><el-buttontype="warning">警告按钮</el-button><el-buttontype="danger">危险按钮</el-button><el-buttontype="info">信息按钮</el-button></template>

禁用状态和加载状态：

<el-buttontype="primary":disabled="isDisabled">禁用按钮</el-button><el-buttontype="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-itemlabel="用户名"prop="name"><el-inputv-model="form.name"></el-input></el-form-item><el-form-itemlabel="密码"prop="password"><el-inputtype="password"v-model="form.password"></el-input></el-form-item><el-form-item><el-buttontype="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'}]}constsubmitForm=()=>{
  formRef.value.validate((valid)=>{if(valid){
      console.log('提交成功', form.value)}else{
      console.log('验证失败')returnfalse}})}constresetForm=()=>{
  formRef.value.resetFields()}</script>

4.3 表格（Table）

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

基本表格：

<template><el-table:data="tableData"style="width: 100%"><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="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-columnprop="date"label="日期"width="180"sortable></el-table-column><el-table-columnprop="name"label="姓名"width="180"sortable></el-table-column><el-table-columnprop="address"label="地址"sortable></el-table-column></el-table></template>

<script setup>import{ ref }from'vue'const tableData =ref([// 数据同上])consthandleSort=(obj)=>{
  console.log(obj.prop, obj.order)}</script>

4.4 弹窗（Dialog）

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

基本弹窗：

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

<script setup>import{ ref }from'vue'const dialogVisible =ref(false)consthandleClose=()=>{
  console.log('弹窗关闭')}</script>

五、样式定制

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

5.1 全局主题定制

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

步骤：

  1. 安装Sass依赖：
npminstall-D sass
  1. 创建variables.scss文件，覆盖默认变量：
// variables.scss
$--color-primary: #409EFF;
$--color-success: #67C23A;
$--color-warning: #E6A23C;
$--color-danger: #F56C6C;
$--color-info: #909399;
  1. 在main.js中引入自定义变量：
import'element-plus/theme-chalk/src/index.scss'import'./variables.scss'

5.2 按需加载和按需定制

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

使用Vite插件：

  1. 安装插件：
npminstall-D unplugin-vue-components unplugin-auto-import
  1. 配置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'exportdefaultdefineConfig({plugins:[vue(),Components({resolvers:[ElementPlusResolver()],}),],})

5.3 自定义组件样式

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

示例：自定义按钮颜色

<template><el-buttonclass="custom-button"type="primary">自定义按钮</el-button></template><stylescoped>.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-headerheight="60px"class="header"><divclass="logo">管理后台</div><el-menu:default-active="activeIndex"mode="horizontal"@select="handleSelect"><el-menu-itemindex="1">首页</el-menu-item><el-menu-itemindex="2">用户管理</el-menu-item><el-menu-itemindex="3">设置</el-menu-item></el-menu></el-header></template><scriptsetup>import{ ref }from'vue'const activeIndex =ref('1')consthandleSelect=(key)=>{
  console.log('选中菜单项：', key)}</script><stylescoped>.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-asidewidth="200px"class="aside"><el-menudefault-active="1"class="el-menu-vertical-demo"><el-menu-itemindex="1">首页</el-menu-item><el-menu-itemindex="2">用户管理</el-menu-item><el-menu-itemindex="3">设置</el-menu-item></el-menu></el-aside></template><scriptsetup></script><stylescoped>.aside{background-color: #f5f7fa;}</style>

Content.vue

<template><el-mainclass="main-content"><router-view></router-view></el-main></template><scriptsetup></script><stylescoped>.main-content{padding: 20px;background-color: #f0f2f5;}</style>

App.vue

<template><el-containerstyle="height: 100vh;"><Header/><el-container><Sidebar/><Content/></el-container></el-container></template><scriptsetup>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,})exportdefault 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><scriptsetup></script><stylescoped>h2{margin-bottom: 20px;}</style>

Users.vue

<template><div><el-buttontype="primary"@click="openDialog">新增用户</el-button><el-table:data="users"style="width: 100%"stripe><el-table-columnprop="id"label="ID"width="50"></el-table-column><el-table-columnprop="name"label="姓名"width="150"></el-table-column><el-table-columnprop="email"label="邮箱"></el-table-column><el-table-columnlabel="操作"width="120"><template#default="scope"><el-buttontype="text"size="small"@click="editUser(scope.row)">编辑</el-button><el-buttontype="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-itemlabel="姓名"><el-inputv-model="form.name"></el-input></el-form-item><el-form-itemlabel="邮箱"><el-inputv-model="form.email"></el-input></el-form-item></el-form><spanslot="footer"class="dialog-footer"><el-button@click="dialogVisible = false">取 消</el-button><el-buttontype="primary"@click="submitForm">确 定</el-button></span></el-dialog></div></template><scriptsetup>import{ ref }from'vue'const users =ref([{id:1,name:'张三',email:'[email protected]'},{id:2,name:'李四',email:'[email protected]'},])const dialogVisible =ref(false)const form =ref({name:'',email:''})constopenDialog=()=>{
  dialogVisible.value =true}constsubmitForm=()=>{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{// 添加表单验证提示}}consteditUser=(user)=>{
  console.log('编辑用户', user)// 实现编辑逻辑}constdeleteUser=(user)=>{
  users.value = users.value.filter(u=> u.id !== user.id)}</script><stylescoped>.dialog-footer{text-align: right;}</style>

Settings.vue

<template><div><el-card><h2>设置</h2><el-form:model="settings"label-width="120px"><el-form-itemlabel="语言"><el-selectv-model="settings.language"placeholder="请选择"><el-optionlabel="中文"value="zh"></el-option><el-optionlabel="英文"value="en"></el-option></el-select></el-form-item><el-form-itemlabel="主题"><el-selectv-model="settings.theme"placeholder="请选择"><el-optionlabel="默认"value="default"></el-option><el-optionlabel="暗色"value="dark"></el-option></el-select></el-form-item><el-form-item><el-buttontype="primary"@click="saveSettings">保存</el-button></el-form-item></el-form></el-card></div></template><scriptsetup>import{ ref }from'vue'const settings =ref({language:'zh',theme:'default',})constsaveSettings=()=>{
  console.log('保存设置', settings.value)// 实现保存逻辑}</script><stylescoped>h2{margin-bottom: 20px;}</style>

7.4 运行项目

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

npm run dev

打开浏览器访问

http://localhost:3000

，即可看到构建好的管理后台。

标签： 前端
本文转载自: https://blog.csdn.net/zhouzongxin94/article/details/144205804
版权归原作者 ChatGPT-千鑫 所有， 如有侵权，请联系我们删除。
登录后发布评论

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

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航