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

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


html>
<html>
<head>
  <meta charset="UTF-8">
  
  <script src="js/vue3.3.8/vue.global.js">script>
  
  
  <script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js">script>
  
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
 
 
 
head>
<body>
<div id="app">
  
  {{message}}
  <el-button type="success">成功按钮el-button>
  <el-progress type="circle" :percentage="20">el-progress>
div>
body>
 
<script>
 const { createApp, ref } = Vue
   createApp({
     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

问题分析：

使用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} = Vue
  const app = createApp({
    setup() {
      const message = ref('Hello vue!')
      return {
        message
      }
    }
  })
  app.use(ElementPlus)
  app.mount('#app')
 
</script>
</body>
</html>

指定特定版：

效果：

相关阅读:
SpringBoot异常处理
Arcgis提取玉米种植地分布，并以此为掩膜提取遥感影像
安卓开发环境安装教程
Spring实例化源码解析之ComponentScanAnnotationParser(四)
【CSDN竞赛解析】使用n位定点数编码方案，最多能够.| 在同时涉及极大和极小浮点数值的算法.| 使用IEEE754标准，可以准确.| 路灯亮度：有一条长度为n米的街道.| 池塘水量：某地有n个池塘，
Kaggle比赛—预测 DNA、RNA 和蛋白质测量如何在单细胞中共同变化
JavaEE进阶----SpringBoot快速入门
Java clone()方法与 Cloneable接口详解
【数据结构】单链表：无头+单向+非循环链表增删查改实现
centos7 clamav 杀毒软件安装

原文地址：https://blog.csdn.net/LlanyW/article/details/134310206