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>
<!-- Import style -->
<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
<!-- Import Vue 3 -->
<script src="//unpkg.com/vue@3"></script>
<!-- Import component library -->
<script src="//unpkg.com/element-plus"></script>
</head>
- jsDelivr
<head>
<!-- Import style -->
<link
rel="stylesheet"
href="//cdn.jsdelivr.net/npm/element-plus/dist/index.css"
/>
<!-- Import Vue 3 -->
<script src="//cdn.jsdelivr.net/npm/vue@3"></script>
<!-- Import component library -->
<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
> vite
VITE 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环境）（详细图文） |
