一文教你在现有Vue项目中嵌入Blazor项目
目录
- 准备流程
- 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内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
Blazor框架简介
Blaozr 是由微软2019推出得一种使用.NET 生成交互式客户端得Web UI框架. 该框架利用C#代替JavaScript进行创建UI , 并且可以共享.NET编写的服务端和客户端业务代码. 优势: 1 使用C#代替JavaScript编写代码, 意味着, 如果你使用的是.Net进行编写服务端(例:ASP.NET Core WebApi) 或者是 客户端(WPF/Winform),那么可以共享应用之前的逻辑, 无需针对Web再编写其他的业务代码. 2 始终高效支持 Windows.Lin
-
Blazor实现数据验证
Blazor 提供一组输入组件. 输入组件会将绑定字段数据处理到模型,并在提交窗体时验证用户输入.下表显示了可用的输入组件: EditForm EditForm 组件通过 EditContext 包装这些输入组件并协调验证过程. 创建 EditForm 时,可以使用 Model 参数指定要绑定到的模型实例. 验证通常是使用数据批注完成的,并且可以进行扩展. 若要启用基于数据批注的验证,请将 DataAnnotationsValidator 组件添加为 EditForm 的子组件. EditFor
-
Blazor组件事件处理功能
Blazor的组件当中, 提供了事件处理功能, 这点类似于使用客户端(Winform/Wpf)开发, 经常用到的一些类似: 按钮(Button), 输入框(TextBox) 用到的一些事件, 例如Click.DoubleClick.TextChanged 等等事件允许我们在后台代码当中进行处理相应的逻辑. 介绍事件 在Razor组件中, 同样提供了事件处理功能.对于具有委托类型值且名为 @on {EVENT}(例如 @onclick)的 HTML 元素特性,Razor 组件将该特性的值视为事件处
-
Maui Blazor 使用摄像头实现代码
由于Maui Blazor中界面是由WebView渲染,所以再使用Android的摄像头时无法去获取,因为原生的摄像头需要绑定界面组件所以我找到了其他的实现方式,通过WebView使用js调用设备摄像头 支持多平台兼容目前测试了Android 和PC 由于没有ioc和mac无法测试 大概率是兼容可能需要动态申请权限 1. 添加js方法 我们再wwwroot中创建一个helper.js的文件并且添加以下俩个js函数再index.html中添加<script src="helper.js&qu
-
Blazor页面组件用法介绍
Blazor应用中, 是使用组件来构建用户界面, 例如页面.窗口.对话框等. 组件 使用C#和HTML标记的组合, Blazor组件称之为Razor组件, 文件名以 (.razor)结尾的文件. 1.如下所示, 在VisualStudio创建Blazor应用模板后的截图, 展示了Page文件夹中定义的razor文件. 注意:所有的Blazor组件, 都必须大写字符开头, 否则无效.如上图所示 ↑ 2.关于.razor 页面 对于每个 .razor页面来说, 包含了两个部分: 1. Html标记的
-
Blazor数据绑定用法
Blazor当中, 类似实现了WPF的基础绑定功能, 支持在HTML元素当中使用Razor语法进行绑定C#字段.属性或 Razor 表达式值. 绑定语法 在Html标签中,使用Razor的语法, 前缀使用@符号, 然后添加 @bind="xxxx" 即可实现最简单的绑定, 如下: input @bind="Name" /> @code { private string Name{ get; set; } } 通过上面的操作, Input中的值与属性Name则进
-
一文教你在现有Vue项目中嵌入Blazor项目
目录 准备流程 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=&quo
-
教你如何实现在react项目中嵌入Blazor
目录 如何实现在react现有项目中嵌入Blazor? 首先流程 如何实现在react现有项目中嵌入Blazor? 目前官方只提供了angular和react俩种示例所以本教程只讲react教程 思路讲解: 首先在现有react项目中我们可能某些组件是在Blazor中完成,但是我们没办法找到怎么在react中轻量级使用blazor组件,可能会有人会使用iframe去加载Blazor项目,但是我不太喜欢这种方式,所以今天问了很多大佬,有大佬说可以直接在react使用Blazor组件的方式,并且找到
-
如何在vue项目中嵌入jsp页面的方法(2种)
今日一个项目中一块功能模块是其他系统使用jsp已经开发好的页面,想着直接将其嵌入到当前的vue项目中节约开发成本:但是发现并非想象的那么简单 创建一个server.vue组件加载jsp页面 1 .第一种(使用 v-html进行jsp 渲染) server.vue <template> <div class="docker-server"> <div v-html="pageContent"></div> </di
-
关于vue 项目中浏览器跨域的配置问题
1.什么是跨域 当一个请求url的协议.域名.端口三者之间任意一个与当前页面url不同即为跨域. 2.同源策略 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现. 3.在项目中配置 打开项目找到config文件下的index.js,在js proxyTable中配置跨域,代码如下 proxyTable: { '/api':
-
Vue CLI3搭建的项目中路径相关问题的解决
这是开头 最近在试水 Vue CLI 3,并且尝试配置一个多页面(多应用)项目出来,期间又遇到各种路径问题,于是...于是有了下面的唠叨. 以下都是基于 Vue CLI 3 来举例说明的,使用 2.x 版本的其实也类似 首先,参考 官方文档对静态资源处理的说明,并通过自己的实践,可以总结出以下内容 静态资源可以通过两种方式进行处理: 1.以下情况下,资源不会被 webpack 处理,而是被直接拷贝: 放置在 public 目录下,即使未被使用. 通过绝对路径被引用,即以 / 开头的路径. 2.以
-
vue项目中 使用 pako.js 解密 gzip加密字符串的代码详解
前言 今天跟后台对接一个接口,接受到一个加密的值,说是通过gzip加密过的,然后就蒙蔽了, 赶紧上百度找了一下资料,通过一篇文章(原文在底部)发现有个js库可以解密,就下载轻松解密了 实现代码 poko.js可至Github下载 https://github.com/nodeca/pako or npm install pako import pako from 'pako' // 一个是加密:window.btoa(),一个是解密:window.atob() function decode(e
-
在Vue项目中,防止页面被缩放和放大示例
现在vue的脚手架生成项目之后我们会发现index.html页面中. 在head标签中,我们会看到meta标签中有一条显示是 <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0"> 但是我们发现这条语句中只是让user-scalable=0,这是不让用户进行缩放. 可以页面会在两个手指进行放大!!! 可以页面会在两个手指进行放大!!! 可以
-
vue项目中使用AvueJs的详细教程
目录 一.背景 二.项目中的运用 1.引入 2.table(avue-crud)的使用 三.使用想法 Avue是基于Vue.js和element的快速开发框架 它的核心是数据驱动UI的思想,让我们从繁琐的crud开发中解脱出来,它的写法类似easyUI,但是写起来比easyui更容易,因为它是基础数据双向绑定以及其他vue的特性.同时不知局限于crud,它还有我们经常用的一些组件例如,表单,数据展示卡,人物展示卡等,更多的组件还在开发. Avue.js是基于现有的element-ui库进行的二次
-
浅谈在vue项目中如何定义全局变量和全局函数
写在前面: 如题,在项目中,经常有些函数和变量是需要复用,比如说网站服务器地址,从后台拿到的:用户的登录token,用户的地址信息等,这时候就需要设置一波全局变量和全局函数,这两个设置不太难,而且有一些共通之处,可能有一些朋友对此不太了解,所以随便写出来分享一波.有需要的朋友可以做一下参考,喜欢的可以点波赞,或者关注一下,希望可以帮到大家. 定义全局变量 原理: 设置一个专用的的全局变量模块文件,模块里面定义一些变量初始状态,用export default 暴露出去,在main.js里面使用Vu
-
详解如何去除vue项目中的#——History模式
使用vue-cli搭建的环境,在配置好路由之后,可以看到下面的情况: 但是不难发现#的出现真的很丑陋,并且也不知道这是什么作用? 所以就去Stack Overflow上搜索了,果然还有~ 看来Stack Overflow是真的强大,你在项目中遇到的问题实际上在so上都已经被问过并且解决了,这不: 这是最高票的回答,即在vue2中将mode模式设置为history,试过之后确实奏效! 但是知道这样可以解决问题,却不知道为什么,这是不行的, 随着连接,我们看到了文档. 所以这篇文章也就是引申到