如何在现有的Vue项目中嵌入 Blazor项目？
Posted dotNET跨平台
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何在现有的Vue项目中嵌入 Blazor项目？相关的知识，希望对你有一定的参考价值。
目前官方只提供了angular和react俩种示例,所以本教程将来讲解如何在Vue的现有项目中使用，上期已经做好了react的教材！
准备流程
Vue 项目创建流程
使用
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俩种模式的。可以参考实际业务去使用不同模式的，说到这里基本讲解完成了，谢谢大佬的阅读
以上是关于如何在现有的Vue项目中嵌入 Blazor项目？的主要内容，如果未能解决你的问题，请参考以下文章
如何在现有的基于 Storyboard 的项目中设置 @EnvironmentObject？
如何在现有的 Xcode 项目中安装 phoneGap [关闭]