Vue 3项目安装Element-Plus

        Element Plus 是一个基于 Vue 3 的现代前端UI框架,它旨在提升开发体验,并为开发者提供高效、优雅的组件。如果你正在使用 Vue 3 进行项目开发,那么安装和集成 Element Plus 是一个不错的选择。在本文中,博主将详细介绍如何在 Vue 3 项目中安装 Element Plus

1.创建一个Vue3项目

        在本文中,博主已经创建好了一个Vue 3的项目,如果不知道如何创建Vue 3项目的小伙伴们,可以参考Vite 创建 Vue3 + TS 项目

2.安装依赖

         定位到项目根路径下(与src目录同级),运行命令行:

# 安装 Element-Plus 组件库
# 使用 npm 包管理器
$ npm install element-plus --save# 使用 yarn 包管理器
$ yarn add element-plus# 使用 pnpm 包管理器
$ pnpm install element-plus

3.全局引入样式

        Element Plus 提供了丰富的 CSS 样式,你需要将其引入你的项目中。通常,你可以使用以下 CLI 命令将样式集直接引入你项目的 main.js (或 main.ts)文件中:

# 引入 CSS 样式
$ npm run el-get-style

其实,博主更推荐手动为 Vue3 项目引入 CSS 样式:

/* main.js 或 main.ts文件中 */
import 'element-plus/dist/index.css'  // 引入全局 CSS 样式

 4.全局组件注册

        Element Plus 中的组件使用时需要首先注册。在项目入口文件 main.js (或 main.ts)中引入 Element Plus 组件库:

/* main.js 或 main.ts 文件中 */import { createApp } from 'vue'
引入 Element-Plus 依赖
import ElementPlus from 'element-plus'
// 引入全局 CSS 样式
import 'element-plus/dist/index.css'
import App from './App.vue'const app = createApp(App)// 挂载 Element-Plus
app.use(ElementPlus)
app.mount('#app')

5.使用Element-Plus组件

 现在,你可以在 Vue 组件中使用 Element-Plus UI 组件了:

<!-- index.vue --><template><div><h1>This is a Home Page.</h1><el-button type="primary">Click On</el-button></div>
</template><script>
</script><style>
</style>

        运行项目后,可以看到我们的<el-button></el-button>组件长这样:

6.安装图标

        Element-Plus 跟 Element-UI 不同的是,在Element-Plus中,图标组件不再像Element-UI那样随依赖一起引入,而是需要自己在用到的时候去引入它:

        定位到项目根路径下(与src目录同级),运行命令行:

# 使用 npm 包管理器
$ npm install @element-plus/icons-vue# 使用 yarn 包管理器
$ yarn add @element-plus/icons-vue# 使用 pnpm 包管理器
$ pnpm install @element-plus/icons-vue

        你需要从 @element-plus/icons-vue 中导入所有图标并进行全局注册。

/* main.js 或 main.ts 文件中 */import { createApp } from 'vue'
import '/@/style.css'
import 'element-plus/dist/index.css'
import ElementPlus from 'element-plus'
// 引入 ElementPlus 图标库
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import App from '/@/App.vue'
import pinia from '/@/store'
import router from '/@/router'const app = createApp(App)// 注册 ElementPlus 图标组件
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)
}app.use(pinia)
// 挂载 路由器
app.use(router)
// 挂载 ElementPlus 组件库
app.use(ElementPlus)
app.mount('#app')

7.将图标应用到组件上

<!-- index.vue --><template><div><h1>This is a Home Page.</h1><el-button type="primary"><!-- 如果直接使用SVG图标,则需要为它添加属性 --><!-- 因为SVG图标默认不携带任何属性 --><Edit style="width: 1em; height: 1em; margin-right: 8px" /> Click On</el-button></div>
</template><script setup lang="ts">
import { Edit } from '@element-plus/icons-vue'</script><style scoped>
</style>

        如果不出意外的话,最后的效果应该是这样的:

注意事项:

  • 在开发过程中,确保 Element Plus 版本与 Vue 3 兼容。
  • 如果项目出现任何问题,查看 Element Plus 官方文档是一个很好的选择。
  • 考虑使用按需引入以减少应用的体积,尤其是对于生产环境。
  • 理解和阅读 Element Plus 引入时提供的信息和代码示例。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/382796.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【SASS/SCSS(三)】样式的复用与动态计算(@mixin和@function)

目录 一、mixin 1、定义复用的样式代码&#xff0c;接受传参&#xff0c;搭配include使用。 位置传参 关键词传参 ...语法糖接受传入的任意参数 2、在mixin中使用content&#xff0c;获取外部对mixin的追加内容 二、function 三、字符串——值得注意的点 很多时候&#…

智慧大棚数据库版

创建一个SMartBigHouse数据库 在数据库创建一个表用来存储数据 这边将id设为主键并将标识增量设为1 搭建Winfrom 搭建历史查询界面 串口数据&#xff0c;(这边是用的一个虚拟的串口工具&#xff0c;需要的话私) ModbusSerialMaster master;DataPointCollection wenduValues; //…

细说MCU用DMA控制ADC采样和串口传送的实现方法

目录 一、建立工程 1.相同的配置 2.配置ADC 3.配置DMA 二、代码修改 1.定义存储ADC采样结果的数组 2.启动ADC与定时器 3.编写主程序代码 4.重定义回调函数 5.查看结果 三、修改DMA模式 1. 修改DMA模式为Circular 2.查看结果 采用DMA(Direct Memory Access&#xf…

WSL2 Centos7 Docker服务启动失败怎么办?

wsl 安装的CentOS7镜像,安装了Docker之后,发现用systemctl start docker 无法将docker启动起来。 解决办法 1、编辑文件 vim /usr/lib/systemd/system/docker.service将13行注释掉,然后在下面新增14行的内容。然后保存退出。 2、再次验证 可以发现,我们已经可以正常通过s…

关于Mysql的面试题(实时更新中~)

一、主键约束与“not null unique”区别 1、作为Primary Key的域/域组不能为null&#xff0c;而Unique Key可以。 2、在一个表中只能有一个Primary Key&#xff0c;而多个Unique Key可以同时存在。unique not null 可以 将表的一列或多列定义为唯一性属性&#xff0c;而prima…

redis的集群模式

目录 1. 为什么使用redis集群 2. 主从模式 2.1修改配置文件 2.2 开启三台redis服务 2.3配置主从关系 3. 哨兵模式 3.1 监控功能 3.2 选举的机制 3.3 准备条件 4. 去中心化模式 4.1 准备三主三从 4.2 启动redis 4.3 分配槽以及主从关系 4.4 命令行的客户端 redis提供…

CAD框架介绍

1、适用范围&#xff1a;矢量编辑软件如 服装模板软件、CAD软件、绘图软件 2、支持PLT,DXF,PDF,GCode&#xff08;服装裁割指令)等矢量文件导入 3、支持简易的自动手动排料 4、直线&#xff0c;曲线等编辑功能 5、分页输出绘图指令 6、良好的框架结构&#xff1a;绘图引擎…

d3d12.dll 文件缺失如何解决?五种修复丢失问题的方法

d3d12.dll 文件缺失如何解决&#xff1f;它为什么会不见呢&#xff1f;今天&#xff0c;我们将探讨 d3d12.dll 文件的重要性、原因以及丢失时的解决策略。本文将全面介绍 d3d12.dll 文件&#xff0c;并提供五种修复丢失问题的方法。 d3d12.dll文件是什么的详细介绍 d3d12.dll …

laravel为Model设置全局作用域

如果一个项目中存在这么一个sql条件在任何情况下或大多数情况都会被使用&#xff0c;同时很容易被开发者遗忘&#xff0c;那么就非常适用于今天要提到的这个功能&#xff0c;Eloquent\Model的全局作用域。 首先看一个示例&#xff0c;有个数据表&#xff0c;结构如下&#xff1…

深入浅出WebRTC—NACK

WebRTC 中的 NACK&#xff08;Negative Acknowledgment&#xff09;机制是实时通信中处理网络丢包的关键组件。网络丢包是常见的现象&#xff0c;尤其是在无线网络或不稳定连接中。NACK 机制旨在通过请求重传丢失的数据包来减少这种影响&#xff0c;从而保持通信的连续性和质量…

vue学习笔记(十一)——开发心得(axios的封装、promise细节、vue-router开发中的使用)

1. axios的网络请求的封装 1.1 为什么要封装api? 代码分层&#xff0c;便于以后的修改&#xff0c;无需触碰逻辑页面 目标&#xff1a; 网络请求&#xff0c;不散落在各个逻辑页面里&#xff0c;封装起来方便以后修改 1.2 封装api步骤 ① 在项目 src 下新建目录 utlis &am…

C++——初识模板

前言 模板是C中的重大板块&#xff0c;是使C真正超越C语言的工具&#xff0c;在C模板没有设计出来之前其实C是没有那么被行业和社会所认可的&#xff0c;本节我们将初步了解C中的模板&#xff08;仅作大致讲解&#xff0c;具体的细枝末节将会再过几节讲解&#xff09;&#xf…

Qt多语言功能实现

本文介绍Qt多语言功能实现。 应用程序多语言支持是常用功能&#xff0c;比如产品需要出口到不同语种的国家。采用Qt的多语言支持工具可以方便实现应用程序的多语言功能。本文以中英文语言切换为例&#xff0c;简要介绍Qt的多语言功能实现。 1.界面设计 界面设计需要考虑使用…

【数据分享】2013-2022年我国省市县三级的逐日SO2数据(excel\shp格式\免费获取)

空气质量数据是在我们日常研究中经常使用的数据&#xff01;之前我们给大家分享了2000——2022年的省市县三级的逐日PM2.5数据和2013-2022年的省市县三级的逐日CO数据&#xff08;均可查看之前的文章获悉详情&#xff09;&#xff01; 本次我们分享的是我国2013——2022年的省…

数据隐私保护与区块链技术的结合:新兴趋势分析

在当今数字化时代&#xff0c;数据隐私保护成为了一个备受关注的重要话题。随着个人数据的不断生成和流通&#xff0c;如何有效保护用户的隐私成为了技术创新的一个重要方向。区块链技术作为一种去中心化、安全性高且可追溯的技术手段&#xff0c;正在逐渐成为解决数据隐私保护…

golang 基础 泛型编程

&#xff08;一&#xff09; 示例1 package _caseimport "fmt"// 定义用户类型的结构体 type user struct {ID int64Name stringAge uint8 }// 定义地址类型的结构体 type address struct {ID intProvince stringCity string }// 集合转列表函数&#…

杰发科技Bootloader(2)—— 基于7840的Keil配置地址

序 在7840的sample代码里面有一个简单的Boot跳转APP的示例 PFlash地址从0开始 DFlash的地址从1000000开始 Boot解析 他的boot地址配置为0 Boot的代码主要是这几行&#xff0c;主要作用就是Flash的跳转 int main(void) {SystemClock_Config();InitDebug();printf("demo…

Leetcode 721.账户合并(hash+dfs)☆

思路&#xff1a; 最核心的地方在于如何合并&#xff1f;这里是通过具有相同的email进行账户的合并&#xff0c;这个相同的email类似于图中的共同节点将两个账户连接起来&#xff0c;所以将原来 账户名 -> 邮件1 邮件2.。。变成hash 邮件1 ->账户id1&#xff0c;账户id2…

ModelArts中sinh算子的开发

一、环境配置 1、创建notebook并连接 使用ModelArts新建一个notebook,我这里镜像选择第一个,里面含有cann和Ascend910处理器,我这里环境只能使用ssh连接,创建一个密钥对,保存到C盘中的user/Administrator/目录下。 在网页中选择使用vscode接入,等待vscode打开后,选择密…

【数据结构初阶】一篇文章带你超深度理解【单链表】

hi &#xff01; 目录 前言&#xff1a; 1、链表的概念和结构 2、单链表&#xff08;Single List&#xff0c;简写SList&#xff09;的实现 2.1 定义链表&#xff08;结点&#xff09;的结构 2.2 创建一个链表 2.3 打印链表 2.4 尾插 2.5 头插 2.6 尾删 2.7 头…