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

Question

I wish to use Vue/Vuetify components in Blazor as I am hooked to it because its robust.我希望在 Blazor 中使用 Vue/Vuetify 组件，因为它很强大。

I have tried this but no luck.我试过这个，但没有运气。

<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索引.razor

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

Is there a trick or workaround to run Vue within Blazor?在 Blazor 中运行 Vue 是否有技巧或解决方法？

Answer 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>

The updated sample project is here .更新的示例项目在这里。

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

问题描述

1 个解决方案

解决方案1
0 2021-06-10 04:44:07

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

问题描述

1 个解决方案

解决方案1 0 2021-06-10 04:44:07

解决方案1
0 2021-06-10 04:44:07