Element Plus 实例详解（一）

___安装设置

本篇目录：

一、前言

二、安装方法

1、环境支持

2、Element Plus安装使用方式

（1）、使用包管理器

（2）、浏览器直接引入

3、Element Plus引入方式使用小例子

三、Element Plus用法

1、完整引入

2、按需导入

（1）、自动导入

（2）、手动导入

3、全局配置

四、Element Plus 安装使用小实例

1、搭建Vue3项目（基于Vite + Vue）

2、安装Element Plus

3、完整导入方式引入Element Plus

4、在原Vue+vite欢迎页面增加 Element Plus按钮

五、总结

一、前言

　　声明：不断有人冒我网名，自行转载我博客文章到其他地方，未免被其他的假鬼李鬼冒名造成不必要损失，现公布一下我个人的真实资料：我姓李，是奶奶级别的老。。。老姐姐，今年50岁了，女，广州。

　　我只有一个博客：csdn: 逆境清醒的博客_CSDN博客-python,前端特效实例源码,python turtle绘图集锦领域博主，https://blog.csdn.net/weixin_69553582其他以逆境清醒自居的都是冒名的。除了在csdn上公开交流外（csdn博客留言，csdn动态），其他任何地方我都不会和别人有任何私下联系，请留意分辨真伪（包括在csdn用我账号登录的）。

逆境清醒

2023年3月25日

　　Element Plus是基于Vue 3，面向设计师和开发者的组件库。

　　Element Plus 是为了适配 Vue 3 对 Element UI 进行的重构。

　　使用 TypeScript 开发

　　使用 Vue 3 Teleport 新特性重构挂载类组件

　　使用 Vue 3 Composition API 简化逻辑，降低耦合

　　选择了 Day.js 这种更轻便通用的时间日期选择器解决方案

　　使用 Lerna 维护和管理项目

　　升级适配 async-validator，popperjs 等核心依赖

　　完善 52 种国际化语言支持

二、安装方法

1、环境支持

　　Element Plus 可以在支持 ES2018 和 ResizeObserver 的浏览器上运行。如果您确实需要支持旧版本的浏览器，请自行添加 Babel 和相应的 Polyfill 。

　　由于 Vue 3 不再支持 IE11，Element Plus 也不再支持 IE 浏览器。


Edge ≥ 79	Firefox ≥ 78	Chrome ≥ 64	Safari ≥ 12

2、Element Plus安装使用方式

（1）、使用包管理器

　　用包管理器（如 NPM、Yarn 或 pnpm）安装 Element Plus，方便使用打包工具，如 Vite 或 webpack。

选择一个你喜欢的包管理器

　　NPM：npm install element-plus --save

　　Yarn：yarn add element-plus

　　pnpm：pnpm install element-plus

（2）、浏览器直接引入

　　直接通过浏览器的 HTML 标签导入 Element Plus，然后就可以使用全局变量 ElementPlus 了。

　　根据不同的 CDN 提供商有不同的引入方式

unpkg　　

<head>

<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />

<script src="//unpkg.com/vue@3"></script>

<script src="//unpkg.com/element-plus"></script>
</head>

jsDelivr

<head>

<link
rel="stylesheet"
href="//cdn.jsdelivr.net/npm/element-plus/dist/index.css"
/>

<script src="//cdn.jsdelivr.net/npm/vue@3"></script>

<script src="//cdn.jsdelivr.net/npm/element-plus"></script>
</head>

3、Element Plus引入方式使用小例子

<html><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width,initial-scale=1.0" /><meta name="Element Plus使用方法实例详解逆境清醒" content="逆境清醒Element Plus使用方法实例详解专辑"><title>Element Plus 使用方法实例详解</title><script src="https://unpkg.com/vue@next"></script><!-- import CSS --><link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css"><!-- import JavaScript --><script src="https://unpkg.com/element-plus"></script><title>Element Plus demo</title></head><body><div id="app"><el-button>{{ message }}</el-button><br /><el-button>{{ message1 }}</el-button></div><script>const App = {data() {return {message: "阳光总在风雨后",message1: "历练中完成自我升华",};},};const app = Vue.createApp(App);app.use(ElementPlus);app.mount("#app");</script></body>
</html>

三、Element Plus用法

1、完整引入

　　完整导入方式，使用方便，但打包后的文件大小偏大。

完整引入

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

如果您使用 Volar，请在 tsconfig.json 中通过 compilerOptions.type 指定全局组件类型。

Volar 支持

// tsconfig.json
{
"compilerOptions": {
// ...
"types": ["element-plus/global"]
}
}

2、按需导入

（1）、自动导入

需要使用额外的插件来导入要使用的组件。

需要安装：unplugin-vue-components 和 unplugin-auto-import这两款插件

自动导入

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

然后把下列代码插入到你的 Vite 或 Webpack 的配置文件中

Vite

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
// ...
plugins: [
// ...
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
})

Webpack

// webpack.config.js
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

module.exports = {
// ...
plugins: [
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
}

Nuxt

Nuxt 用户, 只需要安装 @element-plus/nuxt 即可.

npm install -D @element-plus/nuxt

然后将下面的代码写入你的配置文件.

// nuxt.config.ts
export default defineNuxtConfig({
modules: ['@element-plus/nuxt'],
})

（2）、手动导入

　　Element Plus 提供了基于 ES Module 的开箱即用的 Tree Shaking 功能。

　　但你需要安装 unplugin-element-plus 来导入样式。

// App.vue

<template>
<el-button>我是 ElButton</el-button>
</template>
<script>
import { ElButton } from 'element-plus'
export default {
components: { ElButton },
}
</script>

// vite.config.ts

import { defineConfig } from 'vite'
import ElementPlus from 'unplugin-element-plus/vite'

export default defineConfig({
// ...
plugins: [ElementPlus()],
})

WARNING

　　如果使用 unplugin-element-plus 并且只使用组件 API，你需要手动导入样式。

Example:

import 'element-plus/es/components/message/style/css'
import { ElMessage } from 'element-plus'

3、全局配置

　　在引入 ElementPlus 时，可以传入一个包含 size 和 zIndex 属性的全局配置对象。 size 用于设置表单组件的默认尺寸，zIndex 用于设置弹出组件的层级，zIndex 的默认值为 2000。

完整引入：

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import App from './App.vue'

const app = createApp(App)
app.use(ElementPlus, { size: 'small', zIndex: 3000 })

按需引入:

<template>
<el-config-provider :size="size" :z-index="zIndex">
<app />
</el-config-provider>
</template>

<script>
import { defineComponent } from 'vue'
import { ElConfigProvider } from 'element-plus'

export default defineComponent({
components: {
ElConfigProvider,
},
setup() {
return {
zIndex: 3000,
size: 'small',
}
},
})
</script>

使用命令：pnpm dev
将启动本地开发环境

将你的组件添加到 play/src/App.vue

App.vue

<template>
<ComponentYouAreDeveloping />
</template>

<script setup lang="ts">
// 要保证当前组件已注册到 @element-plus/components
import { ComponentYouAreDeveloping } from '@element-plus/components'
</script>
根据需要修改 App.vue 文件让开发过程顺利进行

四、Element Plus 安装使用小实例

　　我们来测试一下Element Plus的Button 按钮基础用法，如果没有错，应该能在页面显示下图按钮式样：

具体操作如下：

1、搭建Vue3项目（基于Vite + Vue）

　　安装时请选择支持Typescript，本实例我安装在（C:\00program\vue\vuelearn\vueviteproject1）目录中，具体方法详见下面文章：

vue3 项目搭建教程（基于create-vue，vite，Vite + Vue）https://blog.csdn.net/weixin_69553582/article/details/129630880

安装完成后打开浏览器：http://localhost:5173/ ,能正常显示以下页面：

2、安装Element Plus

NPM：npm install element-plus --save

　　安装完成后，会在：你的项目\node_modules目录下出现element-plus目录，内有element-plus各种相关文件，我的目录如下:

3、完整导入方式引入Element Plus

　　在你的项目安装中，打开src目录，我的目录是：C:\00program\vue\vuelearn\vueviteproject1\src，
找到【 main.ts 】文件，用编译器打开，增加 Element Plus 导入方式

　　我的完整的main.ts文件如下：（注意，如果你的项目非新装的空项目，请注意备份，不要修改到原项目的设置）

//src目录下的main.ts文件import { createApp } from 'vue'
import './style.css'
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')

4、在原Vue+vite欢迎页面增加 Element Plus按钮

　　在你的项目安装中，打开components目录，我的目录是：C:\00program\vue\vuelearn\vueviteproject1\src\components，
找到【 HelloWorld.vue 】文件，用编译器打开，在原欢迎页面的代码下面，增加 Element Plus的Button 按钮基础用法代码。

　　我的完整代码如下：（注意，如果你的项目非新装的空项目，请注意备份，不要修改到原项目的设置）

// src\components\HelloWorld.vue文件<script setup lang="ts">
import { ref } from 'vue'defineProps<{ msg: string }>()const count = ref(0)import {Check,Delete,Edit,Message,Search,Star,} from '@element-plus/icons-vue'</script><template><h1>{{ msg }}</h1><div class="card"><button type="button" @click="count++">count is {{ count }}</button><p>Edit<code>components/HelloWorld.vue</code> to test HMR</p></div><p>Check out<a href="https://vuejs.org/guide/quick-start.html#local" target="_blank">create-vue</a>, the official Vue + Vite starter</p><p>Install<a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>in your IDE for a better DX</p><p class="read-the-docs">Click on the Vite and Vue logos to learn more</p><el-row class="mb-4"><el-button>Default默认</el-button><el-button type="primary">主要</el-button><el-button type="success">成功</el-button><el-button type="info">信息</el-button><el-button type="warning">警告</el-button><el-button type="danger">危险</el-button></el-row><br /><el-row class="mb-4"><el-button plain>Plain普通 </el-button><el-button type="primary" plain>主要</el-button><el-button type="success" plain>成功</el-button><el-button type="info" plain>信息</el-button><el-button type="warning" plain>警告</el-button><el-button type="danger" plain>危险</el-button></el-row><br /><el-row class="mb-4"><el-button round>Round圆</el-button><el-button type="primary" round>主要</el-button><el-button type="success" round>成功</el-button><el-button type="info" round>信息</el-button><el-button type="warning" round>警告</el-button><el-button type="danger" round>危险</el-button></el-row><br /><el-row><el-button :icon="Search" circle /><el-button type="primary" :icon="Edit" circle /><el-button type="success" :icon="Check" circle /><el-button type="info" :icon="Message" circle /><el-button type="warning" :icon="Star" circle /><el-button type="danger" :icon="Delete" circle /></el-row></template><style scoped>
.read-the-docs {color: #888;
}
</style>

5、验证Element Plus按钮

同时按window+R键,输入cmd,打开命令提示符窗口

因为前面安装Vue项目时已经编译正常运行过，所以现在只需输入：

npm run dev

> vueviteproject1@0.0.0 dev
> viteVITE v4.2.0  ready in 239 ms➜  Local:   http://localhost:5173/➜  Network: use --host to expose➜  press h to show help

我们在浏览器打开本地地址：http://localhost:5173/

如果你没有操作错误，应该会出现和我一样的页面：

我们成功在原Vue+vite项目欢迎页面上，增加了 Element Plus按钮

五、总结

　　我们成功在Vue3+vite项目上安装运行了Element Plus，这是Element Plus学习的第一步，Element Plus还有很多功能组件需要熟悉，我后续会继续更新相关学习资料。

Element Plus 组件
Basic 基础组件	Button 按钮
	Border 边框
	Color 色彩
	Container 布局容器
	Icon 图标
	Layout 布局
	Link 链接
	Text 文本
	Scrollbar 滚动条
	Space 间距
	Typography 排版

配置组件	Config Provider 全局配置

Form 表单组件	Autocomplete 自动补全输入框
	Cascader 级联选择器
	Checkbox 多选框
	Color Picker 取色器
	Date Picker 日期选择器
	DateTime Picker 日期时间选择器
	Form 表单
	Input 输入框
	Input Number 数字输入框
	Radio 单选框
	Rate 评分
	Select 选择器
	Virtualized Select 虚拟化选择器
	Slider 滑块
	Switch 开关
	Time Picker 时间选择器
	Time Select 时间选择
	Transfer 穿梭框
	Upload 上传

Data 数据展示	Avatar 头像
	Badge 徽章
	Calendar 日历
	Card 卡片
	Carousel 走马灯
	Collapse 折叠面板
	Descriptions 描述列表
	Empty 空状态
	Image 图片
	Infinite Scroll 无限滚动
	Pagination 分页
	Progress 进度条
	Result 结果
	Skeleton 骨架屏
	Table 表格
	Virtualized Table 虚拟化表格
	Tag 标签
	Timeline 时间线
	Tree 树形控件
	TreeSelect 树形选择
	Virtualized Tree 虚拟化树形控件
	Statistic 统计组件

Navigation 导航	Affix 固钉
	Backtop 回到顶部
	Breadcrumb 面包屑
	Dropdown 下拉菜单
	Menu 菜单
	Page Header 页头
	Steps 步骤条
	Tabs 标签页

Feedback 反馈组件	Alert 提示
	Dialog 对话框
	Drawer 抽屉
	Loading 加载
	Message 消息提示
	Message Box 消息弹出框
	Notification 通知
	Popconfirm 气泡确认框
	Popover 弹出框
	Tooltip 文字提示

Others 其他	Divider 分割线

Vue3 文章：
1	Vue3安装配置、开发环境搭建(组件安装卸载)（图文详细）
2	创建基于Webpack的Vue.js项目
3	vue3 项目搭建教程（基于create-vue，vite，Vite + Vue）
4	vue3 项目创建(UI图形化界面方式，可视化操作Vue项目，vue ui)

1	Element Plus 实例详解（一）__安装设置
2	Element Plus 实例详解（二）___Button 按钮
3	Element Plus 实例详解（三）___Date Picker 日期选择
4	Element Plus 实例详解（四）___Border 边框
5	Element Plus 实例详解（五）___Scrollbar 滚动条
6	Element Plus 实例详解（六）___Progress 进度条
7	Element Plus 实例详解（七）___Typography 排版
8	Element Plus 实例详解（八）___Radio 单选框
9	Element Plus 实例详解（九）___
10	Element Plus 实例详解（十）___
11	Element Plus 实例详解（十一）___
12	Element Plus 实例详解（十一）___

推荐阅读：

31		Element Plus 实例详解（一）___安装设置
30		Vue3安装配置、开发环境搭建(组件安装卸载)（图文详细）
29		SVG实例详解系列（一）(svg概述、位图和矢量图区别（图解）、SVG应用实例）
28		查看jdk安装路径，在windows上实现多个java jdk的共存解决办法，安装java19后终端乱码的解决
27		别具一格，原创唯美浪漫情人节表白专辑，(复制就可用)（html5,css3,svg)表白爱心代码(1)
26		2023年春节祝福第二弹——送你一只守护兔，让它温暖每一个你【html5 css3】画会动的小兔子，炫酷充电，字体特
25		2023春节祝福系列第一弹（上）（放飞祈福孔明灯，祝福大家身体健康）（附完整源代码及资源免费下载）
24		HTML+CSS+svg绘制精美彩色闪灯圣诞树，HTML+CSS+Js实时新年时间倒数倒计时(附源代码)
23		草莓熊python绘图（春节版，圣诞倒数雪花版）附源代码
22		【程序人生】卡塔尔世界杯元素python海龟绘图（附源代码），世界杯主题前端特效5个（附源码）
21		python爱心源代码集锦（18款）
20		巴斯光年python turtle绘图__附源代码
19		Three.js实例详解___旋转的精灵女孩(附完整代码和资源)（一）
18		草莓熊python turtle绘图代码（玫瑰花版）附源代码
17		立体多层玫瑰绘图源码__玫瑰花python 绘图源码集锦
16		皮卡丘python turtle海龟绘图（电力球版）附源代码
15		【CSDN云IDE】个人使用体验和建议（含超详细操作教程）（python、webGL方向)
14		草莓熊python turtle绘图（风车版）附源代码
13		用代码过中秋，python海龟月饼你要不要尝一口？
12		《 Python List 列表全实例详解系列（一）》__系列总目录、列表概念
11		用代码写出浪漫__合集（python、matplotlib、Matlab、java绘制爱心、玫瑰花、前端特效玫瑰、爱心）
10		Python函数方法实例详解全集(更新中...)
9		matplotlib 自带绘图样式效果展示速查（28种，全）
8		手机屏幕坏了____怎么把里面的资料导出（18种方法）
7		2023年3月TIOBE 指数头条：编程语言 Go 进入 TIOBE 指数前 10 名，多家权威机构____编程语言排行榜__薪酬状
6		Python中Print()函数的用法___实例详解(全，例多）
5		色彩颜色对照表（一）(16进制、RGB、CMYK、HSV、中英文名)
4		Node.js (v19.1.0npm 8.19.3) vue.js安装配置教程（超详细）
3		Tomcat 启动闪退问题解决集（八大类详细）
2		Tomcat端口配置（详细）
1		tomcat11、tomcat10 安装配置（Windows环境）（详细图文）