如何在現有的Vue專案中嵌入 Blazor專案？

tokengo發表於2023-01-20
VueBlazor

目前官方只提供了angular和react倆種示例,所以本教程將來講解如何在Vue的現有專案中使用，上期已經做好了react的教材！

準備流程

Vue 專案建立流程

  1. 使用Vue建立一個Demo專案 全部選擇預設No即可 然後專案名稱就用demo了

    npm init vue@latest

cd demo
npm i

    安裝完成依賴，在專案的根目錄找到index.html 新增以下程式碼即可

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <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/>   <!--對應razor元件的標籤 -->
  </main>
</template>

    然後將Vue專案構建

    npm run build

    將生成的 dist目錄copy到建立的 Blazor的wwwroot中

Blazor專案建立流程

使用mkdir建立一個webassembly資料夾 ，cd進入webassembly目錄，建立 一個空的blazor-webassembly的專案

mkdir webassembly  
cd webassembly
dotnet new blazorwasm-empty

將Microsoft.AspNetCore.Components.CustomElements新增到專案檔案中，Microsoft.AspNetCore.Components.CustomElements就是用於在Vue中使用Blazor的一個包, 需要注意的是這個包只有.Net 6Rc和.Net7正式版才能使用

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

然後開啟Program.cs 修改相關程式碼

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

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

await builder.Build().RunAsync();

開啟webassembly.Pages.Index 修改相關程式碼

<h1>@Title</h1>

<p role="status">點選數量: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">點選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`專案build生成的檔案複製並且覆蓋到`Blazor`專案中的`wwwroot`中

執行效果

我們進入到Blazor專案中準備執行blazor專案

dotnet watch

然後檢視效果，執行效果如下：

執行基本沒有什麼問題，這樣Blazor就不太會太死板，我們就可以某些在於Blazor有優勢的情況就可以去嵌入Blazor實現，在Vue中的使用成本極低，只是引用js，然後透過加入對應的標籤就可以直接使用，當然你如果想要倆個專案一塊除錯的話，可能需要在本地搭建nginx 去將倆個專案一塊代理到一個埠，這種情況是比當前的複製到wwwroot目錄的效果更好的，我現在正在使用這種嵌入的方式在 一個基於react的Ide(opensumi)中嵌入Blazor的元件，實現動態編譯程式碼並且實時的去渲染Blazor元件的效果，這樣會很有效提供開發Blazor的效率，也可以在公司現有專案中的Vue 或者react 和Angular的專案中嵌入Blazor，目前來說嵌入成本很低，而且官方的是支援Server和Webassembly倆種模式的。可以參考實際業務去使用不同模式的，說到這裡基本講解完成了，謝謝大佬的閱讀

喜歡Blazor的小夥伴可以加我一塊交流

來自token的分享

技術交流群：737776595

推薦一個超級好用的Blazor UI元件 MASA Blazor 開源協議 MIT 商用完全沒問題

相關文章