使用Element Plus

牛奶味的团子

已于 2024-04-05 12:35:29 修改

阅读量570

点赞数 10

分类专栏：前端vue3 文章标签： vue.js

于 2024-04-05 12:31:01 首次发布

本文链接：https://blog.csdn.net/m0_74356429/article/details/137397281

版权

本文详细指导如何在官网下载并用npm安装ElementPlus，涉及全局注册、图标包的安装与TypeScript支持，以及如何在Home等页面中应用ElementPlus组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 官网安装

安装 | Element Plus (gitee.io)

安装：

npm install element-plus --save

在main.ts中全局注册ElementPlus并使用

//加入element-plus
import ElementPlus from 'element-plus';
//加入element-plus样式
import 'element-plus/dist/index.css';
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

2. 全局安装图标

例如我们使用官方案例中的带小星星的图标，不显示图标，由于Element Plus是图标样式分离的，我们如要使用需要全局安装图标

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

牛奶味的团子

关注关注

10
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue3-elementPlus注册全局组件，注册全局图标组件

jieweiwujie的博客

06-14

682

【代码】vue3-elementPlus注册全局组件，注册全局图标组件。

如何在 Vue 3 中使用 Element Plus

卡拉米

09-13

1082

Element Plus 允许你通过app.use(ElementPlus, { /* 配置项 */ })的方式来自定义配置，比如设置全局的 z-index、尺寸单位等。不过，对于大多数基础用途来说，你可能不需要进行这些自定义配置。

参与评论您还未登录，请先登录后发表或查看评论

vue3后台管理框架之全局配置element-plus

m0_52704461的博客

10-15

2399

本篇主要介绍集成element-plus，主要包括全量引入，部分引入，element-plus一些常用配置等element-plus官方文档我们先看看element-plus介绍 -----基于 Vue 3，面向设计师和开发者的组件库。

ElementPlus的简单使用

最新发布

m0_74824574的博客

02-24

2431

Element：是饿了么公司前端开发团队提供的一套基于 Vue3 的网站组件库，用于快速构建网页。Element 提供了很多组件（组成网页的部件）供我们使用。例如超链接、按钮、图片、表格等等。官方网站：https://element-plus.org/zh-CN/#/zh-CN链接:link。

vue3全局引入element-plus使用Message教程

肥晨开发的学习之路

03-26

9510

ElMessage 通常是通过 this.$message 在组件的 methods 中调用的，但在 Vue 3 中，由于 Composition API 的引入，你可能需要使用 import { ElMessage } from ‘element-plus’;请注意，ElMessage 接受的参数是一个对象，你可以根据需要配置不同的属性，比如 message（消息内容）、type（消息类型，如 ‘success’、‘warning’、‘info’、‘error’ 等）、duration（显示时间）等。

vue3+Ts+element-plus 项目中element-plus icon全局注册动态生成

零-J

03-01

865

全局注册element plus icon 注册动态展示

elementPlus——图标引入+批量注册全局组件——基础积累

yehaocheng520的博客

08-17

2576

elementPlus——图标引入+批量注册全局组件——基础积累

基于Vue3+Element Plus实现改换 saas，自动引入等功能，使用 Element Plus 免费开源的中后台模版

10-10

这个文件名表明了项目的核心——一个基于Vue3的后台管理界面，使用了Element Plus UI组件，并且是项目的源码主分支，开发者可以下载此代码，根据自身需求进行定制和扩展。总结起来，"芋道管理后台"是一个全面的...

HTML-引入Vue3和Element Plus

04-24

例如，你可以使用Element Plus的组件如`el-button`创建按钮，或者使用Vue3的模板语法和响应式数据来动态渲染页面内容。例如： ```html 点击我 export default { methods: { handleClick() { alert('按钮被...

element plus 手册离线

03-25

总的来说，"element plus 手册离线"提供了一个完整的本地化开发环境，使得开发者能够在没有网络的情况下学习和使用 Element Plus，同时结合 ECharts 实现复杂的用户界面和数据可视化功能。这个离线版文档对于开发者...

Vue3使用Element-plus

IT菜鸟

02-23

4595

此处 Vue3 使用了 Vite 构建工具，没有使用 webpack。

Vue3简单使用element-plus组件库

lfyyyyy的博客

03-09

4496

在vue3中简单使用element-plus组件库前，要配置好所需要的环境依赖，如Node.js，可以在官方中文网上下载中文网链接:Nodejs，下载最新稳定版本下载完成下一步下一步即可，安装完毕后按win+r打开cmd命令窗口输入node -v和npm -v来检查一下是否正常运行，当出现版本号表示可以正常运行element-plus组件库是由饿了么团队为Vue3发布的组件库，我们在开发时可以直接引入相关组件，其样式已经为我们设计好了，也可以自己更改。

element-plus全局导入所有图标

qq_46586512的博客

01-14

2109

element-plus全局导入图标

vue3 element-plus 全局注册组件

weixin_44832362的博客

12-04

1241

vue3 element-plus 全局注册组件

Element Plus 基本使用

qq_62377885的博客

03-23

9277

Element Plus 基本使用官网地址element-plus 基本使用具体部署请看。

Vue3 - Element Plus 全局自动引入图标组件教程，页面使用无需每次 import 即可直接使用＜el-icon＞组件图标（项目使用 Element Plus 内置图标不用再引入了）

王二红

09-08

7834

vue3elementplus图标组件el-icon，vue3elementplus组件库每次都需要import引入图标才能用吗，vue3elementplus图标组件如何不用引入就能使用，elementplusel-icon如何不引入直接使用，Vue3ElementPlus如何像ElementUI一样简单使用icon，ElementPlus怎么使用el-icon，elementplus图标使用详细教程，vue3全局注册elementplus图标库教程，vue3引用eleme

【vue3 TypeScript 使用 element-plus的icons组件注册】

weixin_46659355的博客

03-15

2173

vue3 TypeScript 使用 element-plus的icons组件注册第一步第二步 element-plus的icon是以组件的形式使用的,需要在用到的页面单独引入注册的,如果一个页面要用到很多的icon,而且大多数页面都需要用到icon,这样的情况下单独引入就显得不那么友好友好了,这样我们就需要批量注册了 (如下代码拿来直接可以用) 第一步创建ts文件内容如下 import * as icons from "@element-plus/icons" const importFn = requ

第九章 vue 进阶篇 Element Plus 基本使用

热门推荐

weixin_43546282的博客

02-19

1万+

vue函数进阶布局弹框表格表单提交

Element Plus简介以及相关操作

Java 技术专栏，从入门到精通，熟悉企业级开发

01-22

4012

本章节介绍ElementUI的升级版本Element Plus。Element Plus 教程(beta版，适配 Vue 3.0 的 Element)国内访问地址：https://www.bookstack.cn/read/element-plus-betaPS：比官网要稳定、快捷。

nuxt3 使用element plus

09-12

Nuxt.js 3.x版本是一个基于Vue.js的框架，用于构建服务器端渲染（SSR）、客户端渲染（CSR）和 Progressive Web App (PWA) 的现代Web应用。Element Plus是Element UI的一个增强版，它提供了一套响应式的、轻量级的Vue组件库。要在Nuxt 3中集成Element Plus，你需要做以下几个步骤： 1. **安装依赖**： ``` npm install @nuxtjs/composition-api npm install element-plus vue@next ``` `@nuxtjs/composition-api`是Nuxt 3推荐的API访问方式，而`vue@next`是为了匹配Element Plus的版本。 2. **配置Nuxt.config.js**： ```javascript import { defineNuxtConfig } from '@nuxtjs/composition-api' export default defineNuxtConfig({ buildModules: ['@nuxtjs/composition-api'], plugins: [ { src: '~/plugins/element-plus', ssr: true }, // 如果你想在服务端也加载Element Plus ], components: { '/': 'App', }, app: { config: { imports: { ElementPlus: () => import('element-plus') } } } }) ``` 3. **引入并使用Element Plus组件**：在`.vue`文件中，你可以像使用Vue官方组件一样导入和使用Element Plus组件： ```html <template> <el-container> <el-header>Header</el-header> <el-main>Main Content</el-main> <el-footer>Footer</el-footer> </el-container> </template> <script setup lang="ts"> import { ref } from 'vue' import { ElContainer, ElHeader, ElMain, ElFooter } from 'element-plus' const app = ref(null) </script> ```