createApp({}).mount('#app') 清除vue3中#app的子元素

Question

所以我正在尝试将 Vue3 添加到现有的 asp.net 核心项目中。我想要发生的事情是让我的剃须刀应用程序正常呈现，然后使用自定义 vue 组件给我的前端一种更具反应性的感觉。但是，当我将一个空的 vue 应用程序安装到我的包装器 div（所有其他正文内容的父级）时，它似乎正在删除该包装器 div 的所有 innerHTML，完全删除所有服务器呈现的正文内容。

在我的 _Layout.cshtml 文件中，我将所有内容包装在 ID 为 'app' 的 div 中。

<body>
  <div id='app'>
    @RenderBody()
  </div>

  <script src="~/js/vue-app/dist/js/chunk-vendors.76316534.js"></script>
  <script src="~/js/vue-app/dist/js/app.bf4c5ba9.js"></script>
</body>

在main.js

import { createApp } from 'vue'

const vueApp = createApp({}).mount('#app');

// component definitions below

使用这样设置的应用程序，当我运行我的 .net 项目时，我看到一个空白的白色浏览器 window 而不是我期望的 html 编译的剃刀。在 Vue2 中，可以这样做：

const vueApp = new Vue({
  el: '#app',
  data: {
    ....
  },
  methods: {
   ....
  }//, etc
});

这将导致应用正常呈现 vue 应用绑定到 #app，使 vue 可用于子内容（模型绑定、vue 点击处理等）。

我试过在 mount() 上使用 isHydrate 可选参数，但结果没有变化。

我是不是漏掉了什么？如果您无法在不清除内容的情况下安装应用程序，您如何慢慢迁移现有项目以使用 vue3？非常感谢任何指导。

谢谢

备注：

vue-next runtime-dom source 如果此方法是调用的挂载方法，我不确定为什么 container.innerHTML 不会在组件中设置。 {} 不是一个函数，render/template 没有为它定义。
vue-next runtime-core apiCreateApp source 如果这是被调用的方法....我不知道。

Answer 1

更新

没有模板渲染器的 Vue 3 在编译后将无法处理模板。要解决这个问题，您可以导入 vue/dist/vue.esm-browser（和 vue.runtime.esm-browser.prod for prod），而不是默认的 vue。这将允许 run-time 组件渲染。

createApp({}).mount('#app') 清除vue3中#app的子元素

createApp({}).mount('#app') clears #app's child elements in vue3

vue.js

vuejs3

更新