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…...
Python｜GIF 解析与构建（5）：手搓截屏和帧率控制
目录 Python｜GIF 解析与构建（5）：手搓截屏和帧率控制 一、引言 二、技术实现：手搓截屏模块 2.1 核心原理 2.2 代码解析：ScreenshotData类 2.2.1 截图函数：capture_screen 三、技术实现&…...
ES6从入门到精通：前言
ES6简介 ES6（ECMAScript 2015）是JavaScript语言的重大更新，引入了许多新特性，包括语法糖、新数据类型、模块化支持等，显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var…...
3.3.1_1 检错编码（奇偶校验码）
从这节课开始，我们会探讨数据链路层的差错控制功能，差错控制功能的主要目标是要发现并且解决一个帧内部的位错误，我们需要使用特殊的编码技术去发现帧内部的位错误，当我们发现位错误之后，通常来说有两种解决方案。第一…...
uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖
在前面的练习中，每个页面需要使用ref，onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入，需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...
CMake基础：构建流程详解
目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...
什么是库存周转？如何用进销存系统提高库存周转率？
你可能听说过这样一句话： “利润不是赚出来的，是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业，很多企业看着销售不错，账上却没钱、利润也不见了，一翻库存才发现： 一堆卖不动的旧货…...
【JVM面试篇】高频八股汇总——类加载和类加载器
目录 1. 讲一下类加载过程？ 2. Java创建对象的过程？ 3. 对象的生命周期？ 4. 类加载器有哪些？ 5. 双亲委派模型的作用（好处）？ 6. 讲一下类的加载和双亲委派原则？ 7. 双亲委派模…...
RSS 2025｜从说明书学习复杂机器人操作任务：NUS邵林团队提出全新机器人装配技能学习框架Manual2Skill
视觉语言模型（Vision-Language Models, VLMs），为真实环境中的机器人操作任务提供了极具潜力的解决方案。 尽管 VLMs 取得了显著进展，机器人仍难以胜任复杂的长时程任务（如家具装配），主要受限于人…...
三分算法与DeepSeek辅助证明是单峰函数
前置 单峰函数有唯一的最大值，最大值左侧的数值严格单调递增，最大值右侧的数值严格单调递减。 单谷函数有唯一的最小值，最小值左侧的数值严格单调递减，最小值右侧的数值严格单调递增。 三分的本质 三分和二分一样都是通过不断缩…...
android13 app的触摸问题定位分析流程
一、知识点 一般来说，触摸问题都是app层面出问题，我们可以在ViewRootImpl.java添加log的方式定位；如果是touchableRegion的计算问题，就会相对比较麻烦了，需要通过adb shell dumpsys input > input.log指令，且通过打印堆栈的方式，逐步定位问题，并找到修改方案。 问题…...