Blazor プロジェクトを既存の Vue プロジェクトに埋め込むにはどうすればよいですか?

Vue現時点では公式では angular と React の 2 つの例しか提供していないため、このチュートリアルでは、今後既存のプロジェクトで使用する方法と、react前号で用意された教科書を説明します。

準備工程

`Vue`プロジェクト作成プロセス

[デモプロジェクトの作成]を使用してVueデフォルトの [いいえ] をすべて選択し、プロジェクト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ディレクトリ作成したディレクトリにコピーします。Blazorwwwroot

`Blazor`プロジェクト作成プロセス

mkdirフォルダーを作成しwebassembly、ディレクトリをcd入力し、空のプロジェクトを作成するために使用します。webassemblyblazor-webassembly

mkdir webassembly  
cd webassembly
dotnet new blazorwasm-empty

で使用するためのパッケージであるMicrosoft.AspNetCore.Components.CustomElementsプロジェクトファイルに追加されます。このパッケージは、.Net 6Rc および .Net7 の正式バージョンでのみ使用できることに注意してください。Microsoft.AspNetCore.Components.CustomElementsVueBlazor

<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です対応するタグを追加します。もちろん、2 つのプロジェクトを一緒にデバッグしたい場合は、それらをローカルでビルドして 2 つのプロジェクトを 1 つのポートにプロキシする必要があるかもしれません。この状況は、現在のディレクトリにコピーするよりも優れています。現在使用中この埋め込みメソッドは、react ベース( openumi )コンポーネントに埋め込まれ、コードを動的にコンパイルし、コンポーネントをリアルタイムでレンダリングする効果を実現します。これにより、開発効率が効果的に向上し、会社のコンポーネントにも使用できます。既存のプロジェクトまたはのプロジェクトに埋め込み、現時点では埋め込みコストは非常に低く、公式サポートと2 つのモードがあります。実際の業務を参考にしてモードを使い分けてください。以上で基本的な説明は終わりです。お読みいただきありがとうございました。Vuejsnginx wwwrootIdeBlazorBlazorBlazorVue react AngularBlazorServerWebassembly

気に入ったBlazor友達は私をコミュニケーションに追加できます

トークンからの共有

技術交流グループ：737776595

超使いやすいBlazor UIコンポーネントMASA Blazorオープンソースプロトコルを推奨、MIT商用利用全く問題ありません