9

如何在现有的Vue项目中嵌入 Blazor项目？ - tokengo

 1 year ago
source link: https://www.cnblogs.com/hejiale010426/p/17062764.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

目前官方只提供了angular和react俩种示例,所以本教程将来讲解如何在Vue的现有项目中使用，上期已经做好了react的教材！

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">
    <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

然后查看效果，执行效果如下：

2415052-20230120145804453-702050766.gif

运行基本没有什么问题，这样Blazor就不太会太死板，我们就可以某些在于Blazor有优势的情况就可以去嵌入Blazor实现，在Vue中的使用成本极低，只是引用js，然后通过加入对应的标签就可以直接使用，当然你如果想要俩个项目一块调试的话，可能需要在本地搭建nginx 去将俩个项目一块代理到一个端口，这种情况是比当前的拷贝到wwwroot目录的效果更好的，我现在正在使用这种嵌入的方式在 一个基于react的Ide(opensumi)中嵌入Blazor的组件，实现动态编译代码并且实时的去渲染Blazor组件的效果，这样会很有效提供开发Blazor的效率，也可以在公司现有项目中的Vue 或者react 和Angular的项目中嵌入Blazor，目前来说嵌入成本很低，而且官方的是支持Server和Webassembly俩种模式的。可以参考实际业务去使用不同模式的，说到这里基本讲解完成了，谢谢大佬的阅读

喜欢Blazor的小伙伴可以加我一块交流

来自token的分享

技术交流群：737776595

推荐一个超级好用的Blazor UI组件 MASA Blazor 开源协议 MIT 商用完全没问题

本文作者：tokengo

本文链接：https://www.cnblogs.com/hejiale010426/p/17062764.html

版权声明：本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK