文章摘要
这篇文章介绍了如何在现有Vue项目中嵌入Blazor项目，主要分为以下步骤：
1. **创建项目**：分别创建一个Vue项目和一个Blazor项目，并安装必要的依赖项。
2. **配置文件**：在Vue项目的根目录中添加配置文件，将Vue组件嵌入到Blazor环境中。
3. **构建项目**：使用`npm run build`构建Vue项目，并将构建后的文件复制到Blazor项目的`wwwroot`目录下。
4. **使用标签**：在Blazor项目中添加对应标签，使Vue组件能够被渲染。
5. **注意事项**：提到需要将Vue项目的构建文件正确复制到Blazor项目中，并且官方支持两种模式（嵌入和非嵌入）。
这篇文章的核心目的是通过简单的配置和引用，实现Vue与Blazor项目的高效集成，特别适合希望在现有项目中快速嵌入Blazor组件以提升开发效率的开发者。
目录准备流程Vue 项目创建流程Blazor项目创建流程运行效果
1.使用创建一个Demo项目 全部选择默认No即可 然后项目名称就用了
npm init vue@latest
cd demo
npm i
安装完成依赖，在项目的根目录找到 添加以下代码即可
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<link rel=”icon” href=”https://www.jb51.net/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=”https://www.jb51.net/src/main.ts”></script>
<script src=”https://www.jb51.net/article/_content/Microsoft.AspNetCore.Components.CustomElements/BlazorCustomElements.js”></script>
<script src=”https://www.jb51.net/article/_framework/blazor.webassembly.js”></script>
</body>
</html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<link rel=”icon” href=”https://www.jb51.net/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=”https://www.jb51.net/src/main.ts”></script>
<script src=”https://www.jb51.net/article/_content/Microsoft.AspNetCore.Components.CustomElements/BlazorCustomElements.js”></script>
<script src=”https://www.jb51.net/article/_framework/blazor.webassembly.js”></script>
</body>
</html>
在 中添加以下代码
<script setup lang=”ts”>
</script>
</script>
<template>
<main>
<my-blazor-counter/> <!–对应razor组件的标签 –>
</main>
</template>
然后将项目构建
npm run build
将生成的 目录copy到创建的 的中
使用创建一个文件夹 ，进入目录，创建 一个空的的项目
mkdir webassembly
cd webassembly
dotnet new blazorwasm-empty
cd webassembly
dotnet new blazorwasm-empty
将添加到项目文件中，就是用于在中使用的一个包, 需要注意的是这个包只有.Net 6Rc和.Net7正式版才能使用
<PackageReference=”Microsoft.AspNetCore.Components.CustomElements” Version=”7.0.2″ />
然后打开 修改相关代码
using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
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();
打开 修改相关代码
<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
然后查看效果，执行效果如下：
运行基本没有什么问题，这样就不太会太死板，我们就可以某些在于有优势的情况就可以去嵌入实现，在中的使用成本极低，只是引用，然后通过加入对应的标签就可以直接使用，当然你如果想要俩个项目一块调试的话，可能需要在本地搭建去将俩个项目一块代理到一个端口，这种情况是比当前的拷贝到目录的效果更好的，我现在正在使用这种嵌入的方式在 一个基于react的(opensumi)中嵌入的组件，实现动态编译代码并且实时的去渲染组件的效果，这样会很有效提供开发的效率，也可以在公司现有项目中的或者和的项目中嵌入，目前来说嵌入成本很低，而且官方的是支持和俩种模式的。可以参考实际业务去使用不同模式的，说到这里基本讲解完成了。
到此这篇关于一文教你在现有Vue项目中嵌入Blazor项目的文章就介绍到这了,更多相关Vue嵌入Blazor内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:Android原生嵌入React Native详解教你如何实现在react项目中嵌入Blazor
© 版权声明
文章版权归作者所有，未经允许请勿转载。
