【愚公系列】《循序渐进Vue.js 3.x前端开发实践》044-Element Plus入门

最新推荐文章于 2025-04-14 09:59:02 发布

愚公搬代码

最新推荐文章于 2025-04-14 09:59:02 发布

阅读量1.7w

点赞数 37

分类专栏：愚公系列-书籍专栏文章标签： vue.js javascript 前端框架前端

本文链接：https://blog.csdn.net/aa2528877987/article/details/145397851

版权

愚公系列-书籍专栏专栏收录该内容

474 篇文章

订阅专栏

标题	详情
作者简介	愚公搬代码
头衔	华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。
近期荣誉	2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主，2024年华为云十佳博主等。
博客内容	.NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。
欢迎	👍点赞、✍评论、⭐收藏

🚀前言

在现代前端开发中，用户界面的设计和体验越来越受到重视。为了提高开发效率和界面美观性，使用 UI 组件库已成为许多开发者的首选。Element Plus 作为一款基于 Vue 3 的组件库，为开发者提供了丰富而灵活的 UI 组件，帮助我们快速构建高质量的应用界面。

本篇文章将带你深入探索 Element Plus 的世界，帮助你快速上手这一强大的 UI 组件库。我们将介绍 Element Plus 的基本概念、安装步骤，并通过具体示例展示如何使用其丰富的组件来构建美观、响应式的用户界面。

在文章中，我们将涵盖 Element Plus 的核心组件，包括按钮、表单、表格、对话框等，逐步引导你了解如何配置和使用这些组件。同时，我们还会探讨主题定制、国际化支持以及与 Vue Router 和 Vuex 的集成等高级特性，帮助你在实际项目中灵活运用。

🚀一、Element Plus入门

Element Plus 是基于 Vue 3 的一个开源 UI 组件库，提供了丰富的组件，可以帮助开发者快速构建美观且功能强大的 Web 应用。它是 Element UI 的升级版本，完全支持 Vue 3 和 Composition API。

在本篇指南中，我将介绍如何使用 Element Plus 来构建 Vue 3 项目，包括两种常见的方式：使用脚手架（Vue CLI）和在 HTML 文件中引入。

🔎1. 使用脚手架（Vue CLI）创建项目并引入 Element Plus

🦋1.1 创建 Vue 3 项目

首先，你需要确保已经安装了 Vue CLI。如果没有安装 Vue CLI，请使用以下命令进行安装：

npm install -g @vue/cli

然后，通过 Vue CLI 创建一个 Vue 3 项目：

vue create my-project

在创建过程中，选择 Vue 3 配置。Vue CLI 会为你生成一个基础的 Vue 3 项目结构。

进入项目目录：

cd my-project

🦋1.2 安装 Element Plus

进入项目目录后，使用 npm 或 yarn 安装 Element Plus：

npm install element-plus

或如果你使用的是 yarn：

yarn add element-plus

🦋1.3 全局引入 Element Plus

在你的 Vue 项目中，通常可以通过全局引入 Element Plus，或者按需引入组件。这里我们首先介绍全局引入。

打开 src/main.js 文件，在文件顶部引入 Element Plus，并在 Vue 实例中进行使用：

import { createApp } from 'vue'
import App from './App.vue'

// 引入 Element Plus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css' // 引入样式
// 引入图标
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)

// 遍历ElementPlusIconsVue中的所有组件进行祖册
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    // 向应用实例中全局注册图标组件
    app.component(key, component)
}

app.use(ElementPlus) // 注册 Element Plus 插件

app.mount('#app')

🦋1.4 使用 Element Plus 组件

现在你可以在 App.vue 或其他组件中使用 Element Plus 提供的组件了。例如，使用一个按钮组件：

打开 src/App.vue 文件，修改内容如下：

<template>
  <div id="app">
    <el-button type="primary">这是一个 Element Plus 按钮</el-button>
  </div>
</template>

<script>
export default {
  name: 'App',
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

然后运行开发服务器：

npm run serve

此时你就可以在浏览器中访问 http://localhost:8080，看到一个按钮，点击它就可以看到按钮的效果。

在这里插入图片描述

🔎2. 按需引入 Element Plus 组件

在项目中如果只使用 Element Plus 的少数组件，按需引入可以减小打包体积。

🦋2.1 安装插件

你需要安装 unplugin-vue-components 和 unplugin-auto-imports 插件，它们可以帮助我们按需引入组件和 API。

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

🦋2.2 配置插件

在 vite.config.js 或 vue.config.js 中进行配置（如果你是使用 Vue CLI 创建的项目，默认会有一个 vue.config.js 文件）。

打开 vue.config.js 或 vite.config.js 文件，进行如下配置：

import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import AutoImport from 'unplugin-auto-import/vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    Vue(),
    Components({
      resolvers: [
        // 自动导入 Element Plus 的组件
        (name) => {
          if (name.startsWith('El')) {
            return { name, from: 'element-plus' }
          }
        },
      ],
    }),
    AutoImport({
      imports: ['vue', 'vue-router'], // 自动导入 vue 和 vue-router
    }),
  ],
})

🦋2.3 使用组件

通过这种方式，你无需在 main.js 文件中手动引入组件，只需要在需要的地方使用它们。

例如，在 App.vue 中使用 Element Plus 的按钮组件：

<template>
  <div id="app">
    <el-button type="primary">这是一个按需引入的按钮</el-button>
  </div>
</template>

<script>
export default {
  name: 'App',
}
</script>

在这种配置下，Element Plus 的相关组件会根据你的使用情况自动导入和按需加载。

🔎3. 在 HTML 文件中引入 Element Plus

如果你不想使用 Vue CLI 脚手架，或者只是简单地在一个 HTML 文件中快速使用 Element Plus，可以按以下方式进行操作。

🦋3.1 引入 Element Plus 和 Vue

在你的 index.html 文件中，直接引入 Vue 和 Element Plus 的 CDN 链接：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ElementUI</title>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css" />
    <!-- 引入Vue -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-plus"></script>
</head>
<body>
    <div id="Application" style="text-align: center;">
        <div style="margin: 40px;"><el-tag>这里是模板的内容:{{count}}次点击</el-tag></div>
        <div><el-button v-on:click="clickButton">按钮</el-button></div>
    </div>
    <script>
        const {createApp, ref} = Vue
        const App = {
            setup() {
                const count = ref(0)
                const clickButton = () => {
                    count.value = count.value + 1
                }
                return {count, clickButton}
            }
        }
        // 创建Vue应用实例
        let instance = createApp(App) 
        // 挂载使用Element Plus模块
        instance.use(ElementPlus) 
        // 挂载应用实例
        instance.mount("#Application")
    </script>
</body>
</html>

🦋3.2 运行 HTML 文件

保存文件后，在浏览器中打开 index.html，你将会看到 Element Plus 提供的按钮组件。

这种方式适合快速测试或小型项目，不需要构建系统，也不需要安装依赖。

在这里插入图片描述

🔎4. Element Plus 组件示例

Element Plus 提供了丰富的 UI 组件，常见的组件包括：

按钮（Button）：<el-button>
输入框（Input）：<el-input>
表单（Form）：<el-form>
弹框（Dialog）：<el-dialog>
表格（Table）：<el-table>
导航栏（Menu）：<el-menu>

这些组件可以通过 Vue 3 的模板语法来直接使用。例如：

<template>
  <el-button @click="openDialog">打开弹框</el-button>

  <el-dialog :visible.sync="dialogVisible" title="Hello">
    <p>这是一个 Element Plus 的弹框</p>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
    };
  },
  methods: {
    openDialog() {
      this.dialogVisible = true;
    },
  },
}
</script>