快捷導(dǎo)航

一文教你在現(xiàn)有Vue項(xiàng)目中嵌入Blazor項(xiàng)目

更新時(shí)間：2023年01月21日 08:55:09 作者：tokengo

目前官方只提供了angular和react倆種示例,所以本教程將來講解如何在Vue的現(xiàn)有項(xiàng)目中嵌入使用Blazor項(xiàng)目。文中的方法講解詳細(xì)，感興趣的小伙伴可以了解一下

準(zhǔn)備流程

Vue 項(xiàng)目創(chuàng)建流程

1.使用Vue創(chuàng)建一個(gè)Demo項(xiàng)目全部選擇默認(rèn)No即可然后項(xiàng)目名稱就用demo了

npm init vue@latest

cd demo
npm i

安裝完成依賴，在項(xiàng)目的根目錄找到index.html 添加以下代碼即可

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico" rel="external nofollow" >
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
    <script src="_content/Microsoft.AspNetCore.Components.CustomElements/BlazorCustomElements.js"></script> 
    <script src="_framework/blazor.webassembly.js"></script>
  </body>
</html>

在 src\App.vue中添加以下代碼

<script setup lang="ts">
</script>

<template>
  <main>
    <my-blazor-counter/>   <!--對應(yīng)razor組件的標(biāo)簽 -->
  </main>
</template>

然后將Vue項(xiàng)目構(gòu)建

npm run build

將生成的 dist目錄copy到創(chuàng)建的 Blazor的wwwroot中

Blazor項(xiàng)目創(chuàng)建流程

使用mkdir創(chuàng)建一個(gè)webassembly文件夾，cd進(jìn)入webassembly目錄，創(chuàng)建一個(gè)空的blazor-webassembly的項(xiàng)目

mkdir webassembly  
cd webassembly
dotnet new blazorwasm-empty

將Microsoft.AspNetCore.Components.CustomElements添加到項(xiàng)目文件中，Microsoft.AspNetCore.Components.CustomElements就是用于在Vue中使用Blazor的一個(gè)包, 需要注意的是這個(gè)包只有.Net 6Rc和.Net7正式版才能使用

<PackageReference="Microsoft.AspNetCore.Components.CustomElements" Version="7.0.2" />

然后打開Program.cs 修改相關(guān)代碼

using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
// BlazorApp.Pages.Index可以修改成自己的渲染的razor組件
// my-blazor-counter就是上面提到的razor對應(yīng)的標(biāo)記 這樣就可以在react通過my-blazor-counter去渲染BlazorApp.Pages.Index組件的內(nèi)容了
builder.RootComponents.RegisterCustomElement<webassembly.Pages.Index>("my-blazor-counter");
builder.RootComponents.Add<HeadOutlet>("head::after");

await builder.Build().RunAsync();

打開webassembly.Pages.Index 修改相關(guān)代碼

<h1>@Title</h1>

<p role="status">點(diǎn)擊數(shù)量: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">點(diǎn)擊Blazor組件效果</button>

@code {
    private int currentCount = 0;
    [Parameter] 
    public string Title { get; set; } = "Vue 嵌入 Blazor";
    [Parameter] 
    public int? IncrementAmount { get; set; }

    private void IncrementCount()
    {
        currentCount++;
    }
}
<style>
    button {
        font-weight: bold;
        background-color: #7b31b8;
        color: white;
        border-radius: 4px;
        padding: 4px 12px;
        border: none;
    }

    button:hover {
        background-color: #9654cc;
        cursor: pointer;
    }

    button:active {
        background-color: #b174e4;
    }

</style>

需要注意將`Vue`項(xiàng)目build生成的文件拷貝并且覆蓋到`Blazor`項(xiàng)目中的`wwwroot`中

運(yùn)行效果

我們進(jìn)入到Blazor項(xiàng)目中準(zhǔn)備執(zhí)行blazor項(xiàng)目

dotnet watch

然后查看效果，執(zhí)行效果如下：

運(yùn)行基本沒有什么問題，這樣Blazor就不太會太死板，我們就可以某些在于Blazor有優(yōu)勢的情況就可以去嵌入Blazor實(shí)現(xiàn)，在Vue中的使用成本極低，只是引用js，然后通過加入對應(yīng)的標(biāo)簽就可以直接使用，當(dāng)然你如果想要倆個(gè)項(xiàng)目一塊調(diào)試的話，可能需要在本地搭建nginx 去將倆個(gè)項(xiàng)目一塊代理到一個(gè)端口，這種情況是比當(dāng)前的拷貝到wwwroot目錄的效果更好的，我現(xiàn)在正在使用這種嵌入的方式在一個(gè)基于react的Ide(opensumi)中嵌入Blazor的組件，實(shí)現(xiàn)動態(tài)編譯代碼并且實(shí)時(shí)的去渲染Blazor組件的效果，這樣會很有效提供開發(fā)Blazor的效率，也可以在公司現(xiàn)有項(xiàng)目中的Vue 或者react 和Angular的項(xiàng)目中嵌入Blazor，目前來說嵌入成本很低，而且官方的是支持Server和Webassembly倆種模式的。可以參考實(shí)際業(yè)務(wù)去使用不同模式的，說到這里基本講解完成了。