Element-Plus Global API 与 Vue 3 Global API 配合使用异常问题

问题分析 #

你的代码逻辑本身无错误，无法正常渲染的常见原因有两个：

• Vue @next 标签可能指向非稳定测试版，与Element Plus存在兼容性冲突
• unpkg默认的最新包可能存在临时加载异常，指定明确稳定版本可规避此问题

修正后的可运行代码 #

将Vue的引入链接改为稳定版vue@3，同时为Element Plus指定明确的兼容版本号，确保二者适配：

<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <!-- 引入Vue 3稳定版 -->
    <script src="https://unpkg.com/vue@3"></script>
    <!-- 引入Element Plus对应版本的CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus@2.3.14/dist/index.css">
    <!-- 引入Element Plus对应版本的JS -->
    <script src="https://unpkg.com/element-plus@2.3.14"></script>
    <title>Element Plus demo</title>
  </head>
  <body>
    <div id="app">
      <el-button>{{ message }}</el-button>
    </div>
    <script>
      const App = {
        data() {
          return {
            message: "Hello Element Plus",
          };
        },
      };
      const app = Vue.createApp(App);
      app.use(ElementPlus);
      app.mount("#app");
    </script>
  </body>
</html>

额外排查点 #

1. 按下F12打开浏览器控制台，查看是否有ElementPlus is not defined类报错——若有则说明Element Plus的JS文件未加载成功，需检查网络连接或更换CDN链接
2. 确认CSS文件加载正常，否则组件会丢失样式，看起来像"未输出内容"

内容的提问来源于stack exchange，提问作者Abdul Hanan