我希望在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>
索引.razor
@page "/"
<h1>Hello, world!</h1>
Welcome to your new app.
<SurveyPrompt Title="How is Blazor working for you?" />
<p>{{ message }}</p>
有没有在Blazor中运行Vue的技巧或变通方法？
<!-- 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>
更新后的示例项目在这里。