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

更新时间：2023年01月21日 08:55:09 作者：tokengo

目前官方只提供了angular和react俩种示例,所以本教程将来讲解如何在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中添加以下代码

<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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue
Blazor

Burpsuite模块之Burpsuite Intruder模块详解
Burp Intruder主要有四个模块组成，本文针对每一模块给大家详细介绍，对Burpsuite Intruder模块相关知识感兴趣的朋友一起看看吧
2021-09-09
使用Ollama服务监听0.0.0.0地址
本文介绍了如何配置Ollama以监听0.0.0.0地址,使其能够接受来自任何网络接口的连接,并验证配置是否生效,同时,也提醒了在进行此操作时应注意的安全风险
2025-02-02
vscode安装使用的详细教程
Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器，这篇文章主要介绍了vscode安装使用的详细教程,需要的朋友可以参考下
2020-08-08
常见前端面试题及答案
本文是在GitHub上看到一个大牛总结的前端常见面试题，很多问题问的都很好，很经典、很有代表性。上面没有答案，我就整理了一下，从网上找了一些相关问题的答案
2016-08-08
git之reflog命令的使用
git reflog 命令可以用来查看本地仓库的所有操作记录,包括所有分支的提交、合并、重置等操作,本文就详细的介绍一下如何使用,感兴趣的可以了解一下
2023-08-08
VS2019提示scanf不安全问题的解决
这篇文章主要介绍了VS2019提示scanf不安全问题的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-04-04
VSCode远程XHR failed无法连接的问题及解决方案
VSCode进行远程连接时会检查服务端的Server运行情况,如未运行则需要下载安装,在下载过程中可能需要访问外网,如果外网不通则连接过程失败,解决方法是手动下载离线安装包,手动解压至指定的路径即可,对VSCode远程无法连接问题感兴趣的朋友一起看看吧
2024-03-03
教你免费做一个属于自己稳定有效的图床-PicGo
由于现在很多写作平台都支持了Markdown语法，导致图床用的人越来越多。这篇文章主要介绍了如何免费做一个属于自己稳定有效的图床-PicGo,需要的朋友可以参考下
2020-01-01
OAuth 2.0 概念及授权流程梳理
这篇文章主要介绍了OAuth 2.0 概念及授权流程梳理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-08-08
一文带你了解ChatGPT API的使用
ChatGPT是OpenAI公司开发的一款基于自然语言处理技术的对话生成模型，，能够自动学习自然语言数据的特征，并生成高质量的语言文本。本文将为大家来介绍一下ChatGPT的API使用，希望对大家有所帮助
2023-02-02