Html 引入element UI + vue3 报错Failed to resolve component: el-button
问题：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>指定特定版：
<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
问题：Html 引入element UI vue3 ，el-button效果不出来 <!DOCTYPE html> <html> <head><meta charset"UTF-8"><!-- import Vue before Element --> <!-- <script src"https://unpkg.com/vue2/dist…...
sen2cor安装
Sen2Cor工具安装教程-百度经验 (baidu.com)...
通付盾Web3专题 | SharkTeam：Web3安全实践与创新
在Web3领域，安全漏洞、黑客攻击已愈发成为用户和投资者重点关注的领域。如何保障加密资产的安全，Web3黑暗森林中又有哪些新的攻击模式产生，SharkTeam将从一线进行分享和讨论。 我们先来看一下2023年1月到8月的安全事件数量和损失的数据统计。…...
ARM Linux 基础学习 / Ubuntu 下的包管理 / apt工具
编辑整理 by Staok。 注：在 Github 上的原版文章日后可能会更新，在其它位置发的不会跟进。文章的 Gitee 仓库地址，Gitee 访问更流畅。 Ubuntu 下的包管理 / apt工具 包管理系统的功能和优点大致相同，但打包格式和工具会因平台&a…...
springcloudalibaba入门详细使用教程
目录标题 一、简介二、SpringCloud Alibaba核心组件2-1、Nacos (配置中心与服务注册与发现)2-2、Sentinel (分布式流控)2-3、RocketMQ (消息队列)/RabbitMq/kafka2-4、Seata (分布式事务)2-5、Dubbo (RPC) 三、为什么大家看好 Spring Cloud Alibaba3-1、阿里巴巴强大的技术输出…...
C# DirectoryInfo类的用法
在C#中，DirectoryInfo类是System.IO命名空间中的一个类，用于操作文件夹（目录）。通过DirectoryInfo类，我们可以方便地创建、删除、移动和枚举文件夹。本文将详细介绍DirectoryInfo类的常用方法和属性，并提供…...
IDEA常用快捷键大全（详解）
如何在IDEA中进行内容全局查找 在idea中进行全局查找，可以使用快捷键“Ctrl Shift F”或者在菜单栏中选择Edit > Find > Find in Path。在弹出的界面中，输入要查找的内容。如果“Ctrl Shift F”这个快捷键无法实现全局查找，可以尝…...
设计模式之解释器模式
阅读建议 嗨，伙计！刷到这篇文章咱们就是有缘人，在阅读这篇文章前我有一些建议： 本篇文章大概5000多字，预计阅读时间长需要5分钟。本篇文章的实战性、理论性较强，是一篇质量分数较高的技术干货文章&#x…...
粉够荣获淘宝联盟区域理事会常务理事，携手共铸淘客新生态
淘宝联盟区域理事会于2021年成立，首届成立成都、广州、武汉，服务近2000个领军淘宝客企业，作为区域生态与官方交流重要枢纽，理事会举办近百场交流分享会，带动淘客跨域跨业态交流成长。 2023年9月7日第二届淘宝联盟理事…...
Python爬虫是否合法？
Python爬虫是否合法的问题颇具争议，主要涉及到使用爬虫的目的、操作方式以及是否侵犯了其他人的权益。本文将介绍Python爬虫的合法性问题，并提供一些相关的法律指导和最佳实践。 1. 什么是Python爬虫？ Python爬虫是一种自动化程序ÿ…...
3.2 IDAPro脚本IDC常用函数
IDA Pro内置的IDC脚本语言是一种灵活的、C语言风格的脚本语言，旨在帮助逆向工程师更轻松地进行反汇编和静态分析。IDC脚本语言支持变量、表达式、循环、分支、函数等C语言中的常见语法结构，并且还提供了许多特定于反汇编和静态分析的函数和操作符。由于其…...
用python将csv表格数据做成热力图
python的开发者为处理表格和画图提供了库的支持，使用pandas库可以轻松完成对csv文件的读写操作，使用matplotlib库提供了画热力图的各种方法。实现这个功能首先需要读出csv数，然后设置自定义色条的各种属性如颜色，位置，…...
【程序基础】递归法
算法思想 递归法，其实可以说是一种编程技巧，通过调用自身，防止无限循环而给予递归出口。 思考使用场景 1.一个问题可以拆分成子问题，每个子问题相互独立。 2.数据满足递推关系，或者数据结构满足，例如图&…...
AI 绘画 | Stable Diffusion WebUI的基本设置和插件扩展
前言 Stable Diffusion WebUI是一个基于Gradio库的浏览器界面，用于配置和生成AI绘画作品，并且进行各种精细地配置。它支持目前主流的开源AI绘画模型，例如NovelAI/Stable Diffusion。 在基本设置方面，Stable Diffusion WebUI的默…...
如何用自然语言 5 分钟构建个人知识库应用？我的 GPTs builder 尝试
开发者的想象力闸门一旦打开，迎接我们的必然是目不暇接的 AI 应用浪潮冲击。 兴奋 早晨，我突然发现 ChatGPT 最新的 Create GPTs 功能可以用了。 这太让我意外了，没想到这么快。根据页面上的提示，我一直以为还得等上一周左右。于是…...
rabbitmq启动异常解决
如果 RabbitMQ 节点一直停在 "Stopping and halting node" 阶段，可能是由于一些原因导致节点无法正常停止。以下是一些建议的步骤，以尝试解决此问题： 手动强制终止节点： 尝试使用 rabbitmqctl 命令手动终止节点。在终端…...
OpenGL_Learn08（坐标系统与3D空间）
目录 1. 概述 2. 局部空间 3. 世界空间 4. 观察空间 5. 剪裁空间 6. 初入3D 7. 3D旋转 8. 多个正方体 9. 观察视角 1. 概述 OpenGL希望在每次顶点着色器运行后，我们可见的所有顶点都为标准化设备坐标(Normalized Device Coordinate, NDC)。也就是说&#x…...
github私有仓库开发,公开仓库发布版本
文章目录 github私有仓库开发,公开仓库发布版本需求背景实现思路GitHub Releases具体步骤广告 github私有仓库开发,公开仓库发布版本 需求背景 github私有仓库开发,公开仓库发布版本，既可以保护源代码,又可以发布版本给用户使用。许多知名软件项目都采用了这样的开…...
绿色低碳 数字未来-辽宁省建筑电气2023年学术年会-安科瑞 蒋静
2023年8月18日，辽宁省建筑电气2023年学术年会在辽宁友谊国宾馆成功召开。本届大会以“绿色低碳 数字未来”为主题，着眼为辽宁省建设提供智慧化电气设计及高质量产品服务。 安科瑞围绕“绿色低碳 数字未来”的主题，携充电桩及运营管理平台、工…...
day55
今日内容概要 路由层 无名分组 有名分组 反向解析 无名分组反向解析 有名分组反向解析 路由分发 伪静态的概念(了解) 名称空间(了解) 虚拟环境(了解) django1.x和django2.x的区别 路由层 url(r^test/$, views.test), url(rtestadd, views.testadd), ## 首页的地址 u…...
DeepSeek 赋能智慧能源：微电网优化调度的智能革新路径
目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...
K8S认证|CKS题库+答案| 11. AppArmor
目录 11. AppArmor 免费获取并激活 CKA_v1.31_模拟系统 题目 开始操作： 1）、切换集群 2）、切换节点 3）、切换到 apparmor 的目录 4）、执行 apparmor 策略模块 5）、修改 pod 文件 6）、…...
HDFS分布式存储 zookeeper
hadoop介绍 狭义上hadoop是指apache的一款开源软件 用java语言实现开源框架，允许使用简单的变成模型跨计算机对大型集群进行分布式处理（1.海量的数据存储 2.海量数据的计算）Hadoop核心组件 hdfs（分布式文件存储系统）&a…...
使用Spring AI和MCP协议构建图片搜索服务
目录 使用Spring AI和MCP协议构建图片搜索服务 引言 技术栈概览 项目架构设计 架构图 服务端开发 1. 创建Spring Boot项目 2. 实现图片搜索工具 3. 配置传输模式 Stdio模式（本地调用） SSE模式（远程调用） 4. 注册工具提…...
【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的“no matching...“系列算法协商失败问题
【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的"no matching..."系列算法协商失败问题 摘要： 近期，在使用较新版本的OpenSSH客户端连接老旧SSH服务器时，会遇到 "no matching key exchange method found", "n…...
数学建模-滑翔伞伞翼面积的设计，运动状态计算和优化 ！
我们考虑滑翔伞的伞翼面积设计问题以及运动状态描述。滑翔伞的性能主要取决于伞翼面积、气动特性以及飞行员的重量。我们的目标是建立数学模型来描述滑翔伞的运动状态，并优化伞翼面积的设计。 一、问题分析 滑翔伞在飞行过程中受到重力、升力和阻力的作用。升力和阻力与伞翼面…...
Linux部署私有文件管理系统MinIO
最近需要用到一个文件管理服务，但是又不想花钱，所以就想着自己搭建一个，刚好我们用的一个开源框架已经集成了MinIO，所以就选了这个 我这边对文件服务性能要求不是太高，单机版就可以 安装非常简单，几个命令就…...
 Module Federation：Webpack.config.js文件中每个属性的含义解释)
MFE(微前端) Module Federation：Webpack.config.js文件中每个属性的含义解释
以Module Federation 插件详为例，Webpack.config.js它可能的配置和含义如下： 前言 Module Federation 的Webpack.config.js核心配置包括： name filename（定义应用标识） remotes（引用远程模块࿰…...
游戏开发中常见的战斗数值英文缩写对照表
游戏开发中常见的战斗数值英文缩写对照表 基础属性（Basic Attributes） 缩写英文全称中文释义常见使用场景HPHit Points / Health Points生命值角色生存状态MPMana Points / Magic Points魔法值技能释放资源SPStamina Points体力值动作消耗资源APAction…...
起重机起升机构的安全装置有哪些？
起重机起升机构的安全装置是保障吊装作业安全的关键部件，主要用于防止超载、失控、断绳等危险情况。以下是常见的安全装置及其功能和原理： 一、超载保护装置（核心安全装置） 1. 起重量限制器 功能：实时监测起升载荷&a…...