VUE3项目学习系列--element-plus集成(三)

 1、安装依赖

Element-plus官网:快速开始 | Element Plus (element-plus.org)

pnpm i element-plus

在项目main.ts中引入element-plus:

import { createApp } from "vue";
import App from "./App.vue";
// 从Element官网上参考,引入element-plus插件与样式
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'const app = createApp(App)// 挂载到应用上
app.use(ElementPlus)
app.mount('#app')

在app.vue中使用element-plus:

<script setup lang="ts">
</script><template><div><!-- element-plus按钮 --><el-button type="primary" size="de">测试</el-button><el-button plain>Plain</el-button><el-button type="primary" plain>Primary</el-button><el-button type="success" plain>Success</el-button><el-button type="info" plain>Info</el-button><el-button type="warning" plain>Warning</el-button><el-button type="danger" plain>Danger</el-button><h1>VUE3</h1></div>
</template><style scoped></style>

运行启动项目:pnpm run dev

 2、安装element 图标库

pnpm i @element-plus/icons-vue

在app.vue页面中使用图标:先引入图标Plus,再在控件按钮中使用图标:icon="Plus"

<script setup lang="ts">// 引入图标import {Plus} from "@element-plus/icons-vue"
</script><template><div><!-- element-plus按钮 --><el-button type="primary" size="de" :icon="Plus">测试</el-button><el-button plain>Plain</el-button><el-button type="primary" plain>Primary</el-button><el-button type="success" plain>Success</el-button><el-button type="info" plain>Info</el-button><el-button type="warning" plain>Warning</el-button><el-button type="danger" plain>Danger</el-button><h1>VUE3</h1></div>
</template><style scoped></style>

 3、element-plus 国际化

由于element-plus模式显示的英文,在使用控件过程中要求显示中文需要在main.ts如下配置

import { createApp } from "vue";
import App from "./App.vue";
// 从Element官网上参考,引入element-plus插件与样式
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// 配置element-plus国际化
//@ts-ignore --忽略ts校验
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
const app = createApp(App)app.use(ElementPlus, {locale: zhCn,})
// 挂载到应用上
app.use(ElementPlus)
app.mount('#app')

需要注意的是:'element-plus/dist/locale/zh-cn.mjs'引入后会报红,是由于ts校验检测导致的,通过添加://@ts-ignore   可忽略ts检测

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

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

相关文章

数据挖掘实战 —— 抖音用户浏览行为数据分析与挖掘(代码部分)

文章: 数据挖掘实战 —— 抖音用户浏览行为数据分析与挖掘(一) 数据挖掘实战 —— 抖音用户浏览行为数据分析与挖掘(二) 数据挖掘实战 —— 抖音用户浏览行为数据分析与挖掘(总) 代码: 数据挖掘实战 —— 抖音用户浏览行为数据分析与挖掘(代码…

代码随想录Day37:单调递增的数字、监控二叉树

单调递增的数字 思路&#xff1a;将数字转换为字符串进行操作&#xff1b;从后往前处理&#xff1b; class Solution { public:int monotoneIncreasingDigits(int n) {string strNum to_string(n);int flag strNum.size();for(int i strNum.size() - 1; i > 0; i--){if…

python识别并控制操作已打开的浏览器进行自动化测试

前提&#xff1a;已安装python和selenium 一、将浏览器以debugger模式打开 打开方法&#xff1a; 1.右击浏览器&#xff0c;选择属性&#xff1a; 2.在目标中加上 --remote-debugging-port9222 --user-data-dir"C:\selenum\AutomationProfile" 二、识别代码 from…

MYSQL的sql性能优化技巧

在编写 SQL 查询时&#xff0c;有一些技巧可以帮助你提高性能、简化查询并避免常见错误。以下是一些 MySQL 的写 SQL 技巧&#xff1a; 1. 使用索引 确保经常用于搜索、排序和连接的列上有索引。避免在索引列上使用函数或表达式&#xff0c;这会导致索引失效。使用 EXPLAIN 关…

Java基础(5) 泛型 日期和时间 线程 File-输入流

泛型 java的泛型有点像ts的泛型 public class ArrayList<T> {private T[] array;private int size;public void add(T e) {...}public void remove(int index) {...}public T get(int index) {...} }// 创建可以存储String的ArrayList: ArrayList<String> strLis…

codeTop01:LRU (最近最少使用) 缓存的实现

问题 请你设计并实现一个满足 LRU (最近最少使用) 缓存 约束的数据结构。 实现 LRUCache 类&#xff1a; ● LRUCache(int capacity) 以 正整数 作为容量 capacity 初始化 LRU 缓存 ● int get(int key) 如果关键字 key 存在于缓存中&#xff0c;则返回关键字的值&#xff0c;…

opencart3 添加速卖通商品脚本

非爬虫&#xff0c;只能把速卖通商品信息拿下来解析插入到自己的项目里。 刚接触opencart3没多久&#xff0c;有一些新项目需要添加商品&#xff0c;每次手动从速卖通复制信息又很慢&#xff0c;就自己写了一个脚本。 思路&#xff1a;速卖通商品详情页有一段数据包含了几乎所…

初识Hive

官网地址为&#xff1a; Design - Apache Hive - Apache Software Foundation 一、架构 先来看下官网给的图&#xff1a; 图上显示了Hive的主要组件及其与Hadoop的交互。Hive的主要组件有&#xff1a; UI&#xff1a; 用户向系统提交查询和其他操作的用户界面。截至2011年&…

c++树状数组(超多例题讲解)适合有相应基础的

树状数组&#xff08;Fenwick Tree&#xff09;是一种用于高效计算前缀和的数据结构&#xff0c;具有较小的内存占用和较快的查询、更新操作。它广泛应用于解决一维数组的区间查询问题。 树状数组的原理基于二进制的思想。假设有一个长度为n的数组A&#xff0c;树状数组就是用…

基于STC12C5A60S2系列1T 8051单片机的TM1638键盘数码管模块的按键扫描、数码管显示按键值、显示按键LED应用

基于STC12C5A60S2系列1T 8051单片机的TM1638键盘数码管模块的按键扫描、数码管显示按键值、显示按键LED应用 STC12C5A60S2系列1T 8051单片机管脚图STC12C5A60S2系列1T 8051单片机I/O口各种不同工作模式及配置STC12C5A60S2系列1T 8051单片机I/O口各种不同工作模式介绍TM1638键盘…

C# WinForm AndtUI第三方库 Tree控件使用记录

环境搭建 1.在NuGet中搜索AndtUI并下载至C# .NetFramework WinForm项目。 2.添加Tree控件至窗体。 使用方法集合 1.添加节点、子节点 using AntdUI; private void UpdateTreeView() {Tree tvwTestnew Tree();TreeItem rootTreeItem;TreeItem subTreeItem;Dictionary<str…

高级软件开发知识点

流程 算法题简历上项目用到技术、流程、遇到问题HR 准备 常考的题型和回答思路刷100算法题&#xff0c;理解其思想&#xff0c;不要死记最近一家公司所负责的业务和项目&#xff1a; 项目背景、演进之路&#xff0c;有哪个阶段&#xff0c;每个阶段主要做什么项目中技术选型…

【战略前沿】人形机器人制造商Figure获得了OpenAI、Jeff Bezos、Nvidia和其他科技巨头的资助

原文&#xff1a;Humanoid robot-maker Figure gets funding from OpenAI, Jeff Bezos, Nvidia, and other tech giants 作者&#xff1a;ASSOCIATED PRESS ———————————————— Figure成立不到两年&#xff0c;还没有商业产品&#xff0c;但正在说服有影响力的…

STM32 TIM编码器接口

单片机学习&#xff01; 目录 文章目录 前言 一、编码器接口简介 1.1 编码器接口作用 1.2 编码器接口工作流程 1.3 编码器接口资源分布 1.4 编码器接口输入引脚 二、正交编码器 2.1 正交编码器功能 2.2 引脚作用 2.3 如何测量方向 2.4 正交信号优势 2.5 执行逻辑 三、编码器定时…

[DevOps云实践] 彻底删除AWS云资源

[DevOps云实践] 彻底删除AWS云资源 在实际项目当中&#xff0c;我们经常会遇到云设施资源的删除。如果资源删除不干净&#xff0c;时间一长便会被一些莫名其妙的费用所困扰。 本文将把实际项目过程当中&#xff0c;删除资源时候容易遗漏的点讲解给大家。 1. 彻底删除EC2实例 …

[AIGC] Flink中的Max和Reduce操作:区别及使用场景

Apache Flink提供了一系列的操作&#xff0c;用于对流数据进行处理和转换。在这篇文章中&#xff0c;我们将重点关注两种常见的操作&#xff1a;Max和Reduce。虽然这两种操作在表面上看起来类似——都是对数据进行一些形式的聚合&#xff0c;但它们在应用和行为上有一些关键的区…

15-Java责任链模式 ( Chain of Responsibility)

Java责任链模式 摘要实现范例 责任链模式&#xff08;Chain of Responsibility Pattern&#xff09;为请求创建了一个接收者对象的链 责任链模式给予请求的类型&#xff0c;对请求的发送者和接收者进行解耦 责任链模式中通常每个接收者都包含对另一个接收者的引用&#xff0c…

【replace跳转 和push跳转】

"跳转"一词通常用于指示在程序或网页中从一个位置或页面转到另一个位置或页面。 替代"replace跳转": "replace跳转"通常用于在浏览器中替换当前页面的历史记录。如果您想要替代这种行为&#xff0c;您可以考虑使用以下方法&#xff1a; 使用Ja…

头像剪切上传

头像剪切上传 文章说明核心Api示例源码效果展示源码下载 文章说明 本文主要为了学习头像裁剪功能&#xff0c;以及熟悉canvas绘图和转文件的相关操作&#xff0c;参考教程&#xff08;Web渡一前端–图片裁剪上传原理&#xff09; 核心Api 主要就一个在canvas绘图的操作 context…

2.8k star! 用开源免费的edge-tts平替科大讯飞的语音合成服务

edge-tts是github上的一个开源项目&#xff0c;可以免费将文本转为语音&#xff0c;别看它只有2.8k star&#xff0c;替代科大讯飞的收费TTS服务完全没问题&#xff0c;因为这个项目实际是调用的微软edge的在线语音合成服务&#xff0c;支持40多种语言&#xff0c;300多种声音&…