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…...
AI-调查研究-01-正念冥想有用吗？对健康的影响及科学指南
点一下关注吧！！！非常感谢！！持续更新！！！ 🚀 AI篇持续更新中！（长期更新） 目前2025年06月05日更新到： AI炼丹日志-28 - Aud…...
QMC5883L的驱动
简介 本篇文章的代码已经上传到了github上面，开源代码 作为一个电子罗盘模块，我们可以通过I2C从中获取偏航角yaw，相对于六轴陀螺仪的yaw，qmc5883l几乎不会零飘并且成本较低。 参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...
css的定位（position）详解：相对定位 绝对定位 固定定位
在 CSS 中，元素的定位通过 position 属性控制，共有 5 种定位模式：static（静态定位）、relative（相对定位）、absolute（绝对定位）、fixed（固定定位）和…...
Springboot社区养老保险系统小程序
一、前言 随着我国经济迅速发展，人们对手机的需求越来越大，各种手机软件也都在被广泛应用，但是对于手机进行数据信息管理，对于手机的各种软件也是备受用户的喜爱，社区养老保险系统小程序被用户普遍使用，为方…...
Mysql中select查询语句的执行过程
目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析（Parser） 2.4、执行sql 1. 预处理（Preprocessor） 2. 查询优化器（Optimizer） 3. 执行器…...
JVM 内存结构 详解
内存结构 运行时数据区： Java虚拟机在运行Java程序过程中管理的内存区域。 程序计数器： 线程私有，程序控制流的指示器，分支、循环、跳转、异常处理、线程恢复等基础功能都依赖这个计数器完成。 每个线程都有一个程序计数…...
云原生安全实战：API网关Kong的鉴权与限流详解
🔥「炎码工坊」技术弹药已装填！ 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、基础概念 1. API网关（API Gateway） API网关是微服务架构中的核心组件，负责统一管理所有API的流量入口。它像一座…...
C++课设：简易日历程序（支持传统节假日 + 二十四节气 + 个人纪念日管理）
名人说：路漫漫其修远兮，吾将上下而求索。—— 屈原《离骚》 创作者：Code_流苏(CSDN)（一个喜欢古诗词和编程的Coder😊） 专栏介绍：《编程项目实战》 目录 一、为什么要开发一个日历程序？1. 深入理解时间算法2. 练习面向对象设计3. 学习数据结构应用二、核心算法深度解析…...
Git常用命令完全指南：从入门到精通
Git常用命令完全指南：从入门到精通 一、基础配置命令 1. 用户信息配置 # 设置全局用户名 git config --global user.name "你的名字"# 设置全局邮箱 git config --global user.email "你的邮箱example.com"# 查看所有配置 git config --list…...
android RelativeLayout布局
<?xml version"1.0" encoding"utf-8"?> <RelativeLayout xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width"match_parent"android:layout_height"match_parent"android:gravity&…...