【愚公系列】《循序渐进Vue.js 3.x前端开发实践》044-Element Plus入门
| 标题 | 详情 |
|---|---|
| 作者简介 | 愚公搬代码 |
| 头衔 | 华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，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>
🔎5. 总结
- 使用脚手架（Vue CLI）方式：可以通过 Vue CLI 创建 Vue 项目并引入 Element Plus。
- 按需引入方式：通过配置插件，减少打包体积，仅引入需要的组件。
- 在 HTML 中引入：适用于简单的项目或测试，直接通过 CDN 引入 Vue 和 Element Plus。
Element Plus 为 Vue 3 提供了强大的 UI 组件，可以帮助你快速构建现代化的 Web 应用。希望这篇入门指南能够帮助你顺利上手 Element Plus！如果你有任何问题，欢迎随时提问。
- 点赞
- 收藏
- 关注作者
评论（0）