目前官方只提供了angular和react俩种示例,所以本教程将来讲解如何在`Vue`的现有项目中使用，上期已经做好了`react`的教材！
## 准备流程
### `Vue` 项目创建流程
1. 使用`Vue`创建一个Demo项目 全部选择默认No即可 然后项目名称就用`demo`了
npm init vue@latest cd demo npm i
安装完成依赖，在项目的根目录找到`index.html` 添加以下代码即可
<htmllang="en"><head><metacharset="UTF-8"><linkrel="icon"href="/favicon.ico"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Vite App</title></head><body><divid="app"></div><scripttype="module"src="/src/main.ts"></script><scriptsrc="_content/Microsoft.AspNetCore.Components.CustomElements/BlazorCustomElements.js"></script><scriptsrc="_framework/blazor.webassembly.js"></script></body></html>
在 `src\App.vue`中添加以下代码
<scriptsetuplang="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` 修改相关代码
usingMicrosoft.AspNetCore.Components.Web; usingMicrosoft.AspNetCore.Components.WebAssembly.Hosting; varbuilder=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"); awaitbuilder.Build().RunAsync();
打开`webassembly.Pages.Index` 修改相关代码
<h1>@Title</h1><prole="status">点击数量: @currentCount</p><buttonclass="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: 4px12px; 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` 商用完全没问题
