如何在现有的Vue项目中嵌入 Blazor项目?

目前官方只提供了angular和react俩种示例,所以本教程将来讲解如何在Vue的现有项目中使用,上期已经做好了react的教材!

准备流程

Vue 项目创建流程

  1. 使用Vue创建一个Demo项目 全部选择默认No即可 然后项目名称就用demo

    npm init vue@latest
    
    cd demo
    npm i
    

    安装完成依赖,在项目的根目录找到index.html 添加以下代码即可

    
    
        
        
        
        Vite App
    
        

    srcApp.vue中添加以下代码

    
    
    
    
    

    然后将Vue项目构建

    npm run build
    

    将生成的 dist目录copy到创建的 Blazorwwwroot

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正式版才能使用


然后打开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("my-blazor-counter");
builder.RootComponents.Add("head::after");

await builder.Build().RunAsync();

打开webassembly.Pages.Index 修改相关代码

@Title

点击数量: @currentCount

@code { private int currentCount = 0; [Parameter] public string Title { get; set; } = "Vue 嵌入 Blazor"; [Parameter] public int? IncrementAmount { get; set; } private void IncrementCount() { currentCount++; } }
-  需要注意将Vue项目build生成的文件拷贝并且覆盖到Blazor项目中的wwwroot

运行效果

我们进入到Blazor项目中准备执行blazor项目

dotnet watch

然后查看效果,执行效果如下:

如何在现有的Vue项目中嵌入 Blazor项目?插图

运行基本没有什么问题,这样Blazor就不太会太死板,我们就可以某些在于Blazor有优势的情况就可以去嵌入Blazor实现,在Vue中的使用成本极低,只是引用js,然后通过加入对应的标签就可以直接使用,当然你如果想要俩个项目一块调试的话,可能需要在本地搭建nginx 去将俩个项目一块代理到一个端口,这种情况是比当前的拷贝到wwwroot目录的效果更好的,我现在正在使用这种嵌入的方式在 一个基于react的Ide(opensumi)中嵌入Blazor的组件,实现动态编译代码并且实时的去渲染Blazor组件的效果,这样会很有效提供开发Blazor的效率,也可以在公司现有项目中的Vue 或者react Angular的项目中嵌入Blazor,目前来说嵌入成本很低,而且官方的是支持ServerWebassembly俩种模式的。可以参考实际业务去使用不同模式的,说到这里基本讲解完成了,谢谢大佬的阅读

喜欢Blazor的小伙伴可以加我一块交流

来自token的分享

技术交流群:737776595

推荐一个超级好用的Blazor UI组件 MASA Blazor 开源协议 MIT 商用完全没问题

文章来源于互联网:如何在现有的Vue项目中嵌入 Blazor项目?

THE END
分享
二维码