一文教你在现有Vue项目中嵌入Blazor项目
作者:tokengo
准备流程
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" rel="external nofollow" > <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项目的文章就介绍到这了,更多相关Vue嵌入Blazor内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!