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

Nic*_*ick 5 vue.js vuejs3

所以我试图将 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>
Run Code Online (Sandbox Code Playgroud)

在 main.js 中

import { createApp } from 'vue'

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

// component definitions below
Run Code Online (Sandbox Code Playgroud)

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

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

这将导致应用程序被渲染为正常的 vue 应用程序绑定到#app,使 vue 可用于子内容(模型绑定、vue 单击处理等)。

我试过使用isHydrateon的可选参数mount(),但它不会导致结果发生变化。

我在这里错过了什么吗?不清除内容就挂不了应用,如何慢慢迁移已有项目使用vue3?非常感谢任何指导。

谢谢

笔记:

Dan*_*iel 9

更新

Vue 3 没有模板渲染器,因此在编译后将无法处理模板。要解决这个问题,您可以导入vue/dist/vue.esm-browser(以及vue.runtime.esm-browser.prodprod),而不是默认的vue. 这将允许运行时组件渲染。