如何在现有的Vue项目中嵌入 Blazor项目?
目前官方只提供了angular和react俩种示例,所以本教程将来讲解如何在Vue
的现有项目中使用,上期已经做好了react
的教材!
准备流程
Vue
项目创建流程
使用
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
然后查看效果,执行效果如下:
运行基本没有什么问题,这样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
商用完全没问题
如何在现有的Vue项目中嵌入 Blazor项目?的更多相关文章
- git 在 A 项目中引用 B 项目
git 在 A 项目中引用 B 项目 场景: 需要在项目calcDLL(http://XXX/XXXA.git) 中 引用 项目libindex(http://XXX/XXXB.git). 解决方 ...
- eclipse 项目中嵌入jetty
Jetty是一个提供HHTP服务器.HTTP客户端和javax.servlet容器的开源项目,Jetty 目前的是一个比较被看好的 Servlet 引擎,它的架构比较简单,也是一个可扩展性和非常灵活的 ...
- javaweb项目中嵌入webservice--axis2
由于最近项目中需要搭建webservice服务端,由于原项目是javaweb项目,所以需要整合.之前用cxf试了,启动老是报错,maven依赖冲突.后来索性换成axis2 百度了一圈,下面这个博客 h ...
- ios项目中引用其他项目复习
ios项目中引用其他开源项目,今天再次复习了,记个备注. 1. 将开源项目的.xcodeproj拖入项目frameworks 2. Build Phases下 Links Binary With Li ...
- 在java web项目中实现随项目启动的额外操作
前言 在web项目中经常会遇到在项目启动初始,会要求做一些逻辑的实现,比如实现一个消息推送服务,实现不同类型数据同步的回调操作初始化,或则通知其他客户服务器本项目即将启动,等等.对于这种要求,目前个人 ...
- 在Silverlight 5 项目中创建单元测试项目
下载安装Silverlight ToolKit:测试框架程序集路径:C:\Program Files (x86)\Microsoft SDKs\Silverlight\v5.0\Toolkit\dec ...
- 往android主项目中添加辅助项目
一个较大的工程往往需要多个项目组成,便于更好的并行开发和管理,但最后还是要合到一起来发布.那如何往主项目里添加其他辅助项目呢? 通常的做法是将辅助项目打包成jar包,像库一样导入到主项目,但是如果我们 ...
- 转载:java web 项目中如何设置项目打开的默认页面
通过博客学到的两种方法总结: 一.在web.xml文件中加入: 此时项目打开的默认页面就是loginS.html 二.在WebContent文件夹下添加index.jsp文件,此时这个index.js ...
- 在iOS项目中嵌入RN代码
1:在项目跟目录下创建一个ReactComponent文件夹.目录结构如下: 2: 在ReactComponent文件夹下新建一个 package.json 文件 { "name" ...
- swift项目中嵌入oc
参考资料 需要注意的是 与oc包含swift不同的是 swift包含oc需要在桥接文件中包含要使用的oc的头文件 demo:swiftPlayOc(提取码:37c6)
随机推荐
- 函数柯里化实现sum函数
需求 实现sum函数,使其可以传入不定长参数,以及不定次数调用 //示例 console.log(sum(1,2)(3)()) //6 console.log(sum(2,3,4,5)(1,2)(3) ...
- 基于数组或链表的学生信息管理系统(小学期C语言程序实训)
1.基于数组的学生信息管理系统 实验内容: 编写并调试程序,实现学校各专业班级学生信息的管理.定义学生信息的结构体类型,包括:学号.姓名.专业.班级.3门成绩. 实验要求: (1) main函数:以菜 ...
- 闻道Go语言,6月龄必知必会
大家好,我是马甲哥, 学习新知识, 我的策略是模仿-->归纳--->举一反三, 在同程倒腾Go语言一年有余,本次记录<闻道Go语言,6月龄必知必会>,形式是同我的主力语言C#做 ...
- 题解 P6355 [COCI2007-2008#3] DEJAVU
kcm的原题.. 貌似是个组合数(? \(\sf {Solution}\) 对于每一个点,我们需要统计与它同一行的点数\(a\) 和同一列的点数\(b\) ,则该点对结果\(ans\) 的贡献为\(( ...
- 第2-1-2章 传统方式安装FastDFS-附FastDFS常用命令
目录 3 安装配置 3.1 安装GCC 3.2 安装libevent 3.3 安装libfastcommon 3.4 安装FastDFS 3.5 安装fastdfs-nginx-module 3.5 ...
- Java自定义排序:继承Comparable接口,重写compareTo方法(排序规则)
代码: 1 import java.util.*; 2 3 /** 4 * 学习自定义排序:继承Comparable接口,重写compareTo方法(排序规则). 5 * TreeMap容器的Key是 ...
- WPF之MVVM实践中的Command与CommandParameter
先记录一下,方便以后复习. https://www.cnblogs.com/babietongtianta/p/3474101.html
- 阿里技术专家详解 DDD 系列- Domain Primitive
简介: 关于DDD的一系列文章,希望能继续在总结前人的基础上发扬光大DDD的思想,但是通过一套我认为合理的代码结构.框架和约束,来降低DDD的实践门槛,提升代码质量.可测试性.安全性.健壮性. 作者| ...
- .NET周报【11月第3期 2022-11-22】
国内文章 .NET Conf China 2022 第一批讲师阵容大揭秘!整个期待了! https://mp.weixin.qq.com/s/4p89hhBPw6qv-0OB_T_TOg 目光看过来 ...
- devexpress中searchLookUpEdit赋值不显示
给searchLookUpEdit进行赋值的时候使用 string str="123"; searchLookUpEdit1.EditValue = str; 一直不显示或者显示为 ...