关于Html使用CDN引入ElementUI-Plus与Vue3（组合式）不生效解决方法

最新推荐文章于 2026-05-11 21:21:06 发布

原创最新推荐文章于 2026-05-11 21:21:06 发布 · 1.2k 阅读 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

青木狐

关注

标签

#html #elementui #vue.js #前端

分类前端开发

收录于

本文介绍了如何在新版HTML中通过CDN正确加载ElementUI-Plus库并配合Vue3实现组件化开发，着重强调了`use(ElementPlus)`方法对于确保组件生效的重要性。

关于Html使用CDN引入ElementUI-Plus与Vue3（组合式）不生效解决方法

新版的需要挂载一下

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title></title>

  <link href="https://cdn.bootcdn.net/ajax/libs/element-plus/2.3.12/index.min.css" rel="stylesheet">
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.global.prod.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/element-plus/2.3.12/index.full.js"></script>
</head>

<body>

  <div id="app">
    <el-button>{{message}}</el-button>
  </div>

</body>
<script>
  const { createApp, ref } = Vue
  createApp({
    setup () {
      const message = ref('Hello vue!')
      return {
        message,
      }
    }
  }).use(ElementPlus).mount('#app')
</script>

</html>