时间戳

首页 > 解决方案 > 现有 html 页面中的 Vue 组件

vue.js - 现有 html 页面中的 Vue 组件

问题描述

我想知道是否可以在现有的html页面中使用 Vue 3。我有一个用另一个框架编写的大型项目，将提供必须使用 vue 开发的空 html 页面。这有可能吗？我正在考虑使用cdn，但我听说这对生产不利。

标签： vue.jsvuejs3

解决方案

当然，您可以将 Vue 用作现有 HTML 页面的小部件，以用内容填充它们或使它们更具交互性。

您将需要一个专用的 HTML 容器元素，例如<div id="app">内部<body>，Vue 可以挂载到。

HTML：

<div id="app">
      <div class="test">({{ testMessage }})</div>
</div>

通过 CDN 将 Vue 加载到您的页面：

<script src="https://unpkg.com/vue@3.2.21/dist/"></script>

自定义 JS 来配置、创建和挂载 Vue 实例到<div id="app">：

<script>
const app = {
  data() {
    return {
      testMessage: 'World domination!';
    }
  }
}

Vue.createApp(app).mount('#app');
</script>

推荐阅读