目前官方只提供了angular和react俩种示例,所以本教程将来讲解如何在
Vue
的现有项目中使用，上期已经做好了
react
的教材！
准备流程
Vue
Vue
- 使用
Vue
demo
安装完成依赖，在项目的根目录找到npm init vue@latest cd demo npm iindex.html
在<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="icon" href="/favicon.ico"> <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 builddist
Blazor
wwwroot
Blazor
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
俩种模式的。可以参考实际业务去使用不同模式的，说到这里基本讲解完成了，谢谢大佬的阅读
![一个能够根据对象或者类型自动生成页面组件的Blazor WebAssembly应用[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)