是否可以在 Blazor 中使用 Vue 和 Vue 组件？答案

【问题标题】：Is it possible to use Vue and Vue component in Blazor?是否可以在 Blazor 中使用 Vue 和 Vue 组件？
【发布时间】：2021-08-26 22:32:38
【问题描述】：

我希望在 Blazor 中使用 Vue/Vuetify 组件，因为它很强大。

我试过了，但没有运气。

<body>
<div id="app">Loading...</div>

<div id="blazor-error-ui">
    An unhandled error has occurred.
    <a href="" class="reload">Reload</a>
    <a class="dismiss">????</a>
</div>
<script src="_framework/blazor.webassembly.js"></script>

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        message: 'Hello from Vue!'
    })
</script>

Index.razor

@page "/" 
<h1>Hello, world!</h1> 
Welcome to your new app.
<SurveyPrompt Title="How is Blazor working for you?" />
<p>{{ message }}</p>

是否有在 Blazor 中运行 Vue 的技巧或解决方法？

【问题讨论】：

我迷上了 Vue 拥有 Vuetify，它确实是一个不错的 UI 库。而且我想知道他们在 React to Blazor stackoverflow.com/questions/61487266/… 中所做的事情是否可能相同。顺便说一句，如果您的回答鼓励想象力而不是立即关闭可能性和创新，我会更高兴。
Blazor 和 Vue 都使用虚拟 DOM 来生成 HTML 并计算出要更改的元素。将两者一起使用是一个坏的想法，除非你真的知道自己在做什么（例如 Vue 和 Blazor 内容区域从不重叠），否则应该避免使用。有点像让两位艺术家在同一张画布上画同一张图片。如果他们坚持自己的立场，那很好，否则他们就会开始在别人的作品上作画。

标签： c# asp.net vue.js vuetify.js blazor

【解决方案1】：

<!-- wwwroot/index.html -->
<script src="_framework/blazor.webassembly.js"></script>

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script>
  window.newVueApp = function () {
    new Vue({
      el: "#app",
      data: {
        counter: 0,
      },
      methods: {
        increment() {
          this.counter++;
        },
      },
    });
  };
</script>

<!-- Shared/MainLayout.razor -->
<div class="content px-4" id="app" v-cloak>
    @Body
</div>
...
@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await JS.InvokeVoidAsync("newVueApp");
    }
}

<!-- Pages/Index.razor -->
<p>counter: {{ counter }}</p>

<button @click="increment">Increase counter</button>

更新后的示例项目是here。

【讨论】：

更新我的答案并创建另一个项目。请尝试一下。我对 Blazor 不熟悉，但它似乎允许其他 Javascript 库。
是的。 Blazor 有。该示例在路由中产生了问题。