一文教你在现有Vue项目中嵌入Blazor项目

准备流程

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中添加以下代码

然后将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内容请搜索悠久资源网以前的文章或继续浏览下面的相关文章希望大家以后多多支持悠久资源网！

您可能感兴趣的文章: