当前位置： 首页 > news >正文

Html 引入element UI + vue3 报错Failed to resolve component: el-button

news 2026/4/7 20:25:24

问题：Html 引入element UI + vue3 ，el-button效果不出来

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><!-- import Vue before Element -->
<!--  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>--><script src="js/vue3.3.8/vue.global.js"></script><!-- import JavaScript --><!--  <script src="js/elementUI/index.js"></script>--><script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script><!-- import CSS --><link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css"></head>
<body>
<div id="app"><!-- 双大括号语法，可以直接拿到下面data中return 里面的数据 -->{{message}}<el-button type="success">成功按钮</el-button><el-progress type="circle" :percentage="20"></el-progress>
</div>
</body><script>const { createApp, ref } = VuecreateApp({setup() {const message = ref('Hello vue!')return {message}}}).mount('#app')</script>
</html>

运行报错：

index.min.js:1 Uncaught TypeError: Cannot read properties of undefined (reading '$isServer')

[Vue warn]: Failed to resolve component: el-button
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 
  at <App>

问题分析：

使用vue2的话运行正常，应该是vue3与element UI不兼容。

Element UI是一款基于Vue2.x 的界面框架；Element Plus是一款基于Vue3.x 的界面框架；

解决

vue3的话，改用element Plus

源码：

注意：在挂载vue之前，要加载elementplus

 app.use(ElementPlus)

<html>
<head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width,initial-scale=1.0" /><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 type="primary">{{ message }}</el-button><el-progress :percentage="20" type="circle"></el-progress>
</div>
<script>const {createApp, ref} = Vueconst app = createApp({setup() {const message = ref('Hello vue!')return {message}}})app.use(ElementPlus)app.mount('#app')</script>
</body>
</html>

指定特定版：

<script src=''></script>

  <link rel="stylesheet" href="https://unpkg.com/browse/element-plus@2.4.2/dist/index.css">

<script src='https://unpkg.com/element-plus@2.4.2/dist/index.full.js'></script>
 

效果： 

相关文章：

Html 引入element UI + vue3 报错Failed to resolve component: el-button

问题&#xff1a;Html 引入element UI vue3 &#xff0c;el-button效果不出来 <!DOCTYPE html> <html> <head><meta charset"UTF-8"><!-- import Vue before Element --> <!-- <script src"https://unpkg.com/vue2/dist…...

编程日记 2023/11/13 17:10:36

sen2cor安装

Sen2Cor工具安装教程-百度经验 (baidu.com)...

编程日记 2023/11/13 17:09:35

通付盾Web3专题 | SharkTeam：Web3安全实践与创新

在Web3领域&#xff0c;安全漏洞、黑客攻击已愈发成为用户和投资者重点关注的领域。如何保障加密资产的安全&#xff0c;Web3黑暗森林中又有哪些新的攻击模式产生&#xff0c;SharkTeam将从一线进行分享和讨论。 我们先来看一下2023年1月到8月的安全事件数量和损失的数据统计。…...

编程日记 2023/11/13 17:08:34

ARM Linux 基础学习 / Ubuntu 下的包管理 / apt工具

编辑整理 by Staok。 注&#xff1a;在 Github 上的原版文章日后可能会更新&#xff0c;在其它位置发的不会跟进。文章的 Gitee 仓库地址&#xff0c;Gitee 访问更流畅。 Ubuntu 下的包管理 / apt工具 包管理系统的功能和优点大致相同&#xff0c;但打包格式和工具会因平台&a…...

编程日记 2023/11/13 17:07:33

springcloudalibaba入门详细使用教程

目录标题 一、简介二、SpringCloud Alibaba核心组件2-1、Nacos (配置中心与服务注册与发现)2-2、Sentinel (分布式流控)2-3、RocketMQ (消息队列)/RabbitMq/kafka2-4、Seata (分布式事务)2-5、Dubbo (RPC) 三、为什么大家看好 Spring Cloud Alibaba3-1、阿里巴巴强大的技术输出…...

编程日记 2023/11/13 17:06:32

C# DirectoryInfo类的用法

在C#中&#xff0c;DirectoryInfo类是System.IO命名空间中的一个类&#xff0c;用于操作文件夹&#xff08;目录&#xff09;。通过DirectoryInfo类&#xff0c;我们可以方便地创建、删除、移动和枚举文件夹。本文将详细介绍DirectoryInfo类的常用方法和属性&#xff0c;并提供…...

编程日记 2023/11/13 17:05:31

IDEA常用快捷键大全（详解）

如何在IDEA中进行内容全局查找 在idea中进行全局查找&#xff0c;可以使用快捷键“Ctrl Shift F”或者在菜单栏中选择Edit > Find > Find in Path。在弹出的界面中&#xff0c;输入要查找的内容。如果“Ctrl Shift F”这个快捷键无法实现全局查找&#xff0c;可以尝…...

编程日记 2023/11/13 17:04:30

设计模式之解释器模式

阅读建议 嗨&#xff0c;伙计&#xff01;刷到这篇文章咱们就是有缘人&#xff0c;在阅读这篇文章前我有一些建议&#xff1a; 本篇文章大概5000多字&#xff0c;预计阅读时间长需要5分钟。本篇文章的实战性、理论性较强&#xff0c;是一篇质量分数较高的技术干货文章&#x…...

编程日记 2023/11/13 17:03:29

粉够荣获淘宝联盟区域理事会常务理事，携手共铸淘客新生态

淘宝联盟区域理事会于2021年成立&#xff0c;首届成立成都、广州、武汉&#xff0c;服务近2000个领军淘宝客企业&#xff0c;作为区域生态与官方交流重要枢纽&#xff0c;理事会举办近百场交流分享会&#xff0c;带动淘客跨域跨业态交流成长。 2023年9月7日第二届淘宝联盟理事…...

编程日记 2023/11/13 17:02:28

Python爬虫是否合法？

Python爬虫是否合法的问题颇具争议&#xff0c;主要涉及到使用爬虫的目的、操作方式以及是否侵犯了其他人的权益。本文将介绍Python爬虫的合法性问题&#xff0c;并提供一些相关的法律指导和最佳实践。 1. 什么是Python爬虫&#xff1f; Python爬虫是一种自动化程序&#xff…...

编程日记 2023/11/13 17:01:27

3.2 IDAPro脚本IDC常用函数

IDA Pro内置的IDC脚本语言是一种灵活的、C语言风格的脚本语言&#xff0c;旨在帮助逆向工程师更轻松地进行反汇编和静态分析。IDC脚本语言支持变量、表达式、循环、分支、函数等C语言中的常见语法结构&#xff0c;并且还提供了许多特定于反汇编和静态分析的函数和操作符。由于其…...

编程日记 2023/11/13 17:00:26

用python将csv表格数据做成热力图

python的开发者为处理表格和画图提供了库的支持&#xff0c;使用pandas库可以轻松完成对csv文件的读写操作&#xff0c;使用matplotlib库提供了画热力图的各种方法。实现这个功能首先需要读出csv数&#xff0c;然后设置自定义色条的各种属性如颜色&#xff0c;位置&#xff0c;…...

编程日记 2023/11/13 16:59:25

【程序基础】递归法

算法思想 递归法&#xff0c;其实可以说是一种编程技巧&#xff0c;通过调用自身&#xff0c;防止无限循环而给予递归出口。 思考使用场景 1.一个问题可以拆分成子问题&#xff0c;每个子问题相互独立。 2.数据满足递推关系&#xff0c;或者数据结构满足&#xff0c;例如图&…...

编程日记 2023/11/13 16:58:24

AI 绘画 | Stable Diffusion WebUI的基本设置和插件扩展

前言 Stable Diffusion WebUI是一个基于Gradio库的浏览器界面&#xff0c;用于配置和生成AI绘画作品&#xff0c;并且进行各种精细地配置。它支持目前主流的开源AI绘画模型&#xff0c;例如NovelAI/Stable Diffusion。 在基本设置方面&#xff0c;Stable Diffusion WebUI的默…...

编程日记 2023/11/13 16:57:23

如何用自然语言 5 分钟构建个人知识库应用？我的 GPTs builder 尝试

开发者的想象力闸门一旦打开&#xff0c;迎接我们的必然是目不暇接的 AI 应用浪潮冲击。 兴奋 早晨&#xff0c;我突然发现 ChatGPT 最新的 Create GPTs 功能可以用了。 这太让我意外了&#xff0c;没想到这么快。根据页面上的提示&#xff0c;我一直以为还得等上一周左右。于是…...

编程日记 2023/11/13 16:56:22

rabbitmq启动异常解决

如果 RabbitMQ 节点一直停在 "Stopping and halting node" 阶段&#xff0c;可能是由于一些原因导致节点无法正常停止。以下是一些建议的步骤&#xff0c;以尝试解决此问题&#xff1a; 手动强制终止节点&#xff1a; 尝试使用 rabbitmqctl 命令手动终止节点。在终端…...

编程日记 2023/11/13 16:55:21

OpenGL_Learn08（坐标系统与3D空间）

目录 1. 概述 2. 局部空间 3. 世界空间 4. 观察空间 5. 剪裁空间 6. 初入3D 7. 3D旋转 8. 多个正方体 9. 观察视角 1. 概述 OpenGL希望在每次顶点着色器运行后&#xff0c;我们可见的所有顶点都为标准化设备坐标(Normalized Device Coordinate, NDC)。也就是说&#x…...

编程日记 2023/11/13 16:54:20

github私有仓库开发,公开仓库发布版本

文章目录 github私有仓库开发,公开仓库发布版本需求背景实现思路GitHub Releases具体步骤广告 github私有仓库开发,公开仓库发布版本 需求背景 github私有仓库开发,公开仓库发布版本&#xff0c;既可以保护源代码,又可以发布版本给用户使用。许多知名软件项目都采用了这样的开…...

编程日记 2023/11/13 16:53:19

绿色低碳 数字未来-辽宁省建筑电气2023年学术年会-安科瑞 蒋静

2023年8月18日&#xff0c;辽宁省建筑电气2023年学术年会在辽宁友谊国宾馆成功召开。本届大会以“绿色低碳 数字未来”为主题&#xff0c;着眼为辽宁省建设提供智慧化电气设计及高质量产品服务。 安科瑞围绕“绿色低碳 数字未来”的主题&#xff0c;携充电桩及运营管理平台、工…...

编程日记 2023/11/13 16:52:18

day55

今日内容概要 路由层 无名分组 有名分组 反向解析 无名分组反向解析 有名分组反向解析 路由分发 伪静态的概念(了解) 名称空间(了解) 虚拟环境(了解) django1.x和django2.x的区别 路由层 url(r^test/$, views.test), url(rtestadd, views.testadd), ## 首页的地址 u…...

编程日记 2023/11/13 16:51:17

UE5游戏逆向实战：用FModel提取.pak文件中的3D模型（附Dumper-7避坑指南）

UE5游戏逆向实战&#xff1a;用FModel提取.pak文件中的3D模型&#xff08;附Dumper-7避坑指南&#xff09; 在虚幻引擎5&#xff08;UE5&#xff09;游戏开发与逆向工程领域&#xff0c;资源提取始终是开发者与爱好者关注的核心技能。随着引擎版本迭代&#xff0c;传统的.pak文…...

编程新知 2026/4/7 19:30:43

跨平台媒体传输新选择：Go2TV 3分钟入门指南

跨平台媒体传输新选择&#xff1a;Go2TV 3分钟入门指南 【免费下载链接】go2tv Cast media files to Smart TVs and Chromecast devices. 项目地址: https://gitcode.com/gh_mirrors/go/go2tv Go2TV是一款开源跨平台媒体传输工具&#xff0c;支持将本地媒体文件投屏到智…...

编程新知 2026/4/7 18:35:57

Realistic Vision V5.1 虚拟摄影棚结合传统软件：生成素材导入PS进行后期合成

Realistic Vision V5.1 虚拟摄影棚结合传统软件&#xff1a;生成素材导入PS进行后期合成 你有没有遇到过这样的场景&#xff1a;脑子里有一个绝佳的创意画面&#xff0c;但要么找不到合适的模特和场景&#xff0c;要么拍摄成本高得吓人&#xff0c;要么就是后期修图修到天昏地…...

编程新知 2026/4/7 17:49:13

Tessent测试流程文件里的Tcl魔法：用if/else让你的扫描测试配置更灵活

Tessent测试流程文件里的Tcl魔法&#xff1a;用if/else让你的扫描测试配置更灵活 在芯片测试领域&#xff0c;Tessent Shell作为业界领先的测试解决方案&#xff0c;其Test Procedure File&#xff08;测试流程文件&#xff09;的灵活运用往往能决定测试效率的高低。今天我们要…...

编程新知 2026/4/7 17:20:50

手把手教你用S32K SDK和TCANLINPRO调试LIN总线主从通信（附Tomoss白盒实战）

手把手构建S32KTCANLINPRO的LIN总线开发实战&#xff1a;从硬件对接到协议栈调优 LIN总线作为汽车电子领域经典的辅助网络协议&#xff0c;在车门控制、座椅调节等场景中依然占据重要地位。对于刚接触汽车电子的开发者而言&#xff0c;如何快速搭建LIN通信调试环境往往是个令人…...

编程新知 2026/4/7 17:02:46

汇川伺服Modbus通讯踩坑实录：从“通信超时”到“数据错乱”的五个常见故障排查指南

汇川伺服Modbus通讯实战&#xff1a;五大典型故障排查与深度解析 调试现场的温度总是比办公室高几度&#xff0c;尤其是当你面对一台"沉默"的汇川伺服驱动器时。Modbus-RTU协议作为工业自动化领域的"普通话"&#xff0c;理论上应该让不同设备间的对话变得…...

编程新知 2026/4/7 15:41:38

YOLOv11的PTQ（训练后静态量化）实战：从浮点到整型的性能突围

一、深夜的显存告警 上周三凌晨两点&#xff0c;手机突然连续震动——生产环境服务器显存超限告警。跑到监控面板一看&#xff0c;部署的YOLOv11模型在峰值请求时段显存占用直接飙到8G以上&#xff0c;导致相邻服务被OOM Killer强制终止。这已经是本月第三次了。浮点模型在边缘…...

编程新知 2026/4/7 14:34:07

嵌入式C++安全开发避坑指南，覆盖ARM Cortex-R/A系列、VxWorks与AUTOSAR OS的12类时序敏感漏洞

第一章&#xff1a;嵌入式C安全开发的工业级挑战与范式演进在工业控制、汽车电子与医疗设备等高可靠性领域&#xff0c;嵌入式C正面临前所未有的安全张力&#xff1a;资源受限性与功能安全性之间、实时确定性与抽象灵活性之间、遗留代码兼容性与现代语言特性之间&#xff0c;形…...

编程新知 2026/4/7 14:11:52

百度网盘直链解析技术：突破下载限制的Python解决方案

百度网盘直链解析技术&#xff1a;突破下载限制的Python解决方案 【免费下载链接】baidu-wangpan-parse 获取百度网盘分享文件的下载地址 项目地址: https://gitcode.com/gh_mirrors/ba/baidu-wangpan-parse 在数字资源共享日益频繁的今天&#xff0c;百度网盘作为国内主…...

编程新知 2026/4/7 13:59:48

Intv_AI_MK11 跨平台开发应用：基于 Qt 框架的桌面智能助手

Intv_AI_MK11 跨平台开发应用&#xff1a;基于 Qt 框架的桌面智能助手 1. 为什么需要跨平台智能助手 在日常工作和学习中&#xff0c;我们经常遇到这样的场景&#xff1a;在Windows上收集的资料&#xff0c;想在Mac上继续编辑&#xff1b;在Linux服务器上开发的代码&#xff…...

编程新知 2026/4/7 13:57:30