目前官方只提供了angular和react俩种示例,所以本教程将来讲解如何在spanstylefontsize:14px;Vuespan的现有项目中使用,上期已经做好了spanstylefontsize:14px;reactspan的教材!准备流程spanstylefontsize:14px;Vuespan项目创建流程使用spanstylefontsize:14px;Vuespan创建一个Demo项目全部选择默认No即可然后项目名称就用spanstylefontsize:14px;demospan了spanstylefontsize:14px;npminitvuelatest cddemo npmi span 安装完成依赖,在项目的根目录找到spanstylefontsize:14px;index。htmlspan添加以下代码即可spanstylefontsize:14px;spanstyletransitionduration:0。2s;transitionproperty:backgroundcolor,bordercolor,borderradius,paddingtop,paddingbottom,margintop,marginbottom,color,opacity;color:rgb(43,145,175);!DOCTYPEspanstyletransitionduration:0。2s;htmlspanspan spanstyletransitionduration:0。2s;transitionproperty:backgroundcolor,bordercolor,borderradius,paddingtop,paddingbottom,margintop,marginbottom,color,opacity;color:rgb(0,0,255);spanstyletransitionduration:0。2s;transitionproperty:backgroundcolor,bordercolor,borderradius,paddingtop,paddingbottom,margintop,marginbottom,color,opacity;htmlspanspanstyletransitionduration:0。2s;langspanspanstyletransitionduration:0。2s;enspanspan spanstyletransitionduration:0。2s;transitionproperty:backgroundcolor,bordercolor,borderradius,paddingtop,paddingbottom,margintop,marginbottom,color,opacity;color:rgb(0,0,255);spanstyletransitionduration:0。2s;transitionproperty:backgroundcolor,bordercolor,borderradius,paddingtop,paddingbottom,margintop,marginbottom,color,opacity;headspanspan spanstyletransitionduration:0。2s;transitionproperty:backgroundcolor,bordercolor,borderradius,paddingtop,paddingbottom,margintop,marginbottom,color,opacity;color:rgb(0,0,255);spanstyletransitionduration:0。2s;transitionproperty:backgroundcolor,bordercolor,borderradius,paddingtop,paddingbottom,margintop,marginbottom,color,opacity;metaspanspanstyletransitionduration:0。2s;charsetspanspanstyletransitionduration:0。2s;UTF8spanspan spanstyletransitionduration:0。2s;transitionproperty:backgroundcolor,bordercolor,borderradius,paddingtop,paddingbottom,margintop,marginbottom,color,opacity;color:rgb(0,0,255);spanstyletransitionduration:0。2s;transitionproperty:backgroundcolor,bordercolor,borderradius,paddingtop,paddingbottom,margintop,marginbottom,color,opacity;linkspanspanstyletransitionduration:0。2s;relspanspanstyletransitionduration:0。2s;iconspanspanstyletransitionduration:0。2s;hrefspanspanstyletransitionduration:0。2s;favicon。icospanspan spanstyletransitionduration:0。2s;transitionproperty:backgroundcolor,bordercolor,borderradius,paddingtop,paddingbottom,margintop,marginbottom,color,opacity;color:rgb(0,0,255);spanstyletransitionduration:0。2s;transitionproperty:backgroundcolor,bordercolor,borderradius,paddingtop,paddingbottom,margintop,marginbottom,color,opacity;metaspanspanstyletransitionduration:0。2s;namespanspanstyletransitionduration:0。2s;viewportspanspanstyletransitionduration:0。2s;contentspanspanstyletransitionduration:0。2s;widthdevicewidth,initialscale1。0spanspan spanstyletransitionduration:0。2s;transitionproperty:backgroundcolor,bordercolor,borderradius,paddingtop,paddingbottom,margintop,marginbottom,color,opacity;color:rgb(0,0,255);spanstyletransitionduration:0。2s;transitionproperty:backgroundcolor,bordercolor,borderradius,paddingtop,paddingbottom,margintop,marginbottom,color,opacity;titlespanspanViteAppspanstyletransitionduration:0。2s;transitionproperty:backgroundcolor,bordercolor,borderradius,paddingtop,paddingbottom,margintop,marginbottom,color,opacity;color:rgb(0,0,255);spanstyletransitionduration:0。2s;transitionproperty:backgroundcolor,bordercolor,borderradius,paddingtop,paddingbottom,margintop,marginbottom,color,opacity;titlespanspan spanstyletransitionduration:0。2s;transitionproperty:backgroundcolor,bordercolor,borderradius,paddingtop,paddingbottom,margintop,marginbottom,color,opacity;color:rgb(0,0,255);spanstyletransitionduration:0。2s;transitionproperty:backgroundcolor,bordercolor,borderradius,paddingtop,paddingbottom,margintop,marginbottom,color,opacity;headspanspan spanstyletransitionduration:0。2s;transitionproperty:backgroundcolor,bordercolor,borderradius,paddingtop,paddingbottom,margintop,marginbottom,color,opacity;color:rgb(0,0,255);spanstyletransitionduration:0。2s;transitionproperty:backgroundcolor,bordercolor,borderradius,paddingtop,paddingbottom,margintop,marginbottom,color,opacity;bodyspanspan spanstyletransitionduration:0。2s;transitionproperty:backgroundcolor,bordercolor,borderradius,paddingtop,paddingbottom,margintop,marginbottom,color,opacity;color:rgb(0,0,255);spanstyletransitionduration:0。2s;transitionproperty:backgroundcolor,bordercolor,borderradius,paddingtop,paddingbottom,margintop,marginbottom,color,opacity;pspanspanstyletransitionduration:0。2s;idspanspanstyletransitionduration:0。2s;appspanspanstyletransitionduration:0。2s;transitionproperty:backgroundcolor,bordercolor,borderradius,paddingtop,paddingbottom,margintop,marginbottom,color,opacity;pspanspan spanstyletransitionduration:0。2s;transitionproperty:backgroundcolor,bordercolor,borderradius,paddingtop,paddingbottom,margintop,marginbottom,color,opacity;color:rgb(0,0,255);spanstyletransitionduration:0。2s;transitionproperty:backgroundcolor,bordercolor,borderradius,paddingtop,paddingbottom,margintop,marginbottom,color,opacity;scriptspanspanstyletransitionduration:0。2s;typespanspanstyletransitionduration:0。2s;modulespanspanstyletransitionduration:0。2s;srcspanspanstyletransitionduration:0。2s;srcmain。tsspanspanstyletransitionduration:0。2s;transitionproperty:backgroundcolor,bordercolor,borderradius,paddingtop,paddingbottom,margintop,marginbottom,color,opacity;scriptspanspan spanstyletransitionduration:0。2s;transitionproperty:backgroundcolor,bordercolor,borderradius,paddingtop,paddingbottom,margintop,marginbottom,color,opacity;color:rgb(0,0,255);spanstyletransitionduration:0。2s;transitionproperty:backgroundcolor,bordercolor,borderradius,paddingtop,paddingbottom,margintop,marginbottom,color,opacity;scriptspanspanstyletransitionduration:0。2s;srcspanspanstyletransitionduration:0。2s;contentMicrosoft。AspNetCore。Components。CustomElementsBlazorCustomElements。jsspanspanstyletransitionduration:0。2s;transitionproperty:backgroundcolor,bordercolor,borderradius,paddingtop,paddingbottom,margintop,marginbottom,color,opacity;scriptspanspan spanstyletransitionduration:0。2s;transitionproperty:backgroundcolor,bordercolor,borderradius,paddingtop,paddingbottom,margintop,marginbottom,color,opacity;color:rgb(0,0,255);spanstyletransitionduration:0。2s;transitionproperty:backgroundcolor,bordercolor,borderradius,paddingtop,paddingbottom,margintop,marginbottom,color,opacity;scriptspanspanstyletransitionduration:0。2s;srcspanspanstyletransitionduration:0。2s;frameworkblazor。webassembly。jsspanspanstyletransitionduration:0。2s;transitionproperty:backgroundcolor,bordercolor,borderradius,paddingtop,paddingbottom,margintop,marginbottom,color,opacity;scriptspanspan spanstyletransitionduration:0。2s;transitionproperty:backgroundcolor,bordercolor,borderradius,paddingtop,paddingbottom,margintop,marginbottom,color,opacity;color:rgb(0,0,255);spanstyletransitionduration:0。2s;transitionproperty:backgroundcolor,bordercolor,borderradius,paddingtop,paddingbottom,margintop,marginbottom,color,opacity;bodyspanspan spanstyletransitionduration:0。2s;transitionproperty:backgroundcolor,bordercolor,borderradius,paddingtop,paddingbottom,margintop,marginbottom,color,opacity;color:rgb(0,0,255);spanstyletransitionduration:0。2s;transitionproperty:backgroundcolor,bordercolor,borderradius,paddingtop,paddingbottom,margintop,marginbottom,color,opacity;htmlspanspan span 在spanstylefontsize:14px;srcApp。vuespan中添加以下代码spanstylefontsize:14px; template main myblazorcounter!对应razor组件的标签 main template span 然后将spanstylefontsize:14px;Vuespan项目构建spanstylefontsize:14px;npmrunbuild span 将生成的spanstylefontsize:14px;distspan目录copy到创建的spanstylefontsize:14px;Blazorspan的spanstylefontsize:14px;wwwrootspan中spanstylefontsize:14px;Blazorspan项目创建流程 使用spanstylefontsize:14px;mkdirspan创建一个spanstylefontsize:14px;webassemblyspan文件夹,spanstylefontsize:14px;cdspan进入spanstylefontsize:14px;webassemblyspan目录,创建一个空的spanstylefontsize:14px;blazorwebassemblyspan的项目spanstylefontsize:14px;mkdirwebassembly cdwebassembly dotnetnewblazorwasmempty span 将spanstylefontsize:14px;Microsoft。AspNetCore。Components。CustomElementsspan添加到项目文件中,spanstylefontsize:14px;Microsoft。AspNetCore。Components。CustomElementsspan就是用于在spanstylefontsize:14px;Vuespan中使用spanstylefontsize:14px;Blazorspan的一个包,需要注意的是这个包只有。Net6Rc和。Net7正式版才能使用spanstylefontsize:14px;PackageReferenceMicrosoft。AspNetCore。Components。CustomElementsVersion7。0。2 span 然后打开spanstylefontsize:14px;Program。csspan修改相关代码spanstylefontsize:14px;usingMicrosoft。AspNetCore。Components。Web; usingMicrosoft。AspNetCore。Components。WebAssembly。Hosting; varbuilderWebAssemblyHostBuilder。CreateDefault(args); spanstyletransitionduration:0。2s;transitionproperty:backgroundcolor,bordercolor,borderradius,paddingtop,paddingbottom,margintop,marginbottom,color,opacity;color:rgb(0,128,0);BlazorApp。Pages。Index可以修改成自己的渲染的razor组件span spanstyletransitionduration:0。2s;transitionproperty:backgroundcolor,bordercolor,borderradius,paddingtop,paddingbottom,margintop,marginbottom,color,opacity;color:rgb(0,128,0);myblazorcounter就是上面提到的razor对应的标记这样就可以在react通过myblazorcounter去渲染BlazorApp。Pages。Index组件的内容了span builder。RootComponents。RegisterCustomElementwebassembly。Pages。Index(spanstyletransitionduration:0。2s;transitionproperty:backgroundcolor,bordercolor,borderradius,paddingtop,paddingbottom,margintop,marginbottom,color,opacity;color:rgb(163,21,21);myblazorcounterspan); builder。RootComponents。AddHeadOutlet(spanstyletransitionduration:0。2s;transitionproperty:backgroundcolor,bordercolor,borderradius,paddingtop,paddingbottom,margintop,marginbottom,color,opacity;color:rgb(163,21,21);head::afterspan); awaitbuilder。Build()。RunAsync(); span 打开spanstylefontsize:14px;webassembly。Pages。Indexspan修改相关代码spanstylefontsize:14px;spanstyletransitionduration:0。2s;transitionproperty:backgroundcolor,bordercolor,borderradius,paddingtop,paddingbottom,margintop,marginbottom,color,opacity;color:rgb(0,0,255);spanstyletransitionduration:0。2s;transitionproperty:backgroundcolor,bordercolor,borderradius,paddingtop,paddingbottom,margintop,marginbottom,color,opacity;h1spanspanTitlespanstyletransitionduration:0。2s;transitionproperty:backgroundcolor,bordercolor,borderradius,paddingtop,paddingbottom,margintop,marginbottom,color,opacity;color:rgb(0,0,255);spanstyletransitionduration:0。2s;transitionproperty:backgroundcolor,bordercolor,borderradius,paddingtop,paddingbottom,margintop,marginbottom,color,opacity;h1spanspan spanstyletransitionduration:0。2s;transitionproperty:backgroundcolor,bordercolor,borderradius,paddingtop,paddingbottom,margintop,marginbottom,color,opacity;color:rgb(0,0,255);spanstyletransitionduration:0。2s;transitionproperty:backgroundcolor,bordercolor,borderradius,paddingtop,paddingbottom,margintop,marginbottom,color,opacity;pspanspanstyletransitionduration:0。2s;rolespanspanstyletransitionduration:0。2s;statusspanspan点击数量:currentCountspanstyletransitionduration:0。2s;transitionproperty:backgroundcolor,bordercolor,borderradius,paddingtop,paddingbottom,margintop,marginbottom,color,opacity;color:rgb(0,0,255);spanstyletransitionduration:0。2s;transitionproperty:backgroundcolor,bordercolor,borderradius,paddingtop,paddingbottom,margintop,marginbottom,color,opacity;pspanspan spanstyletransitionduration:0。2s;transitionproperty:backgroundcolor,bordercolor,borderradius,paddingtop,paddingbottom,margintop,marginbottom,color,opacity;color:rgb(0,0,255);spanstyletransitionduration:0。2s;transitionproperty:backgroundcolor,bordercolor,borderradius,paddingtop,paddingbottom,margintop,marginbottom,color,opacity;buttonspanspanstyletransitionduration:0。2s;classspanspanstyletransitionduration:0。2s;btnbtnprimaryspanspanstyletransitionduration:0。2s;onclickspanspanstyletransitionduration:0。2s;IncrementCountspanspan点击Blazor组件效果spanstyletransitionduration:0。2s;transitionproperty:backgroundcolor,bordercolor,borderradius,paddingtop,paddingbottom,margintop,marginbottom,color,opacity;color:rgb(0,0,255);spanstyletransitionduration:0。2s;transitionproperty:backgroundcolor,bordercolor,borderradius,paddingtop,paddingbottom,margintop,marginbottom,color,opacity;buttonspanspan code{ privateintcurrentCount0; 〔Parameter〕 publicstringTitle{get;set;}Vue嵌入Blazor; 〔Parameter〕 publicint?IncrementAmount{get;set;} privatevoidIncrementCount() { currentCount; } } spanstyletransitionduration:0。2s;transitionproperty:backgroundcolor,bordercolor,borderradius,paddingtop,paddingbottom,margintop,marginbottom,color,opacity;color:rgb(0,0,255);spanstyletransitionduration:0。2s;transitionproperty:backgroundcolor,bordercolor,borderradius,paddingtop,paddingbottom,margintop,marginbottom,color,opacity;stylespanspanspanstyletransitionduration:0。2s;transitionproperty:backgroundcolor,bordercolor,borderradius,paddingtop,paddingbottom,margintop,marginbottom,color,opacity; spanstyletransitionduration:0。2s;buttonspan{ spanstyletransitionduration:0。2s;fontweightspan:bold; spanstyletransitionduration:0。2s;backgroundcolorspan:spanstyletransitionduration:0。2s;7b31b8span; spanstyletransitionduration:0。2s;colorspan:white; spanstyletransitionduration:0。2s;borderradiusspan:spanstyletransitionduration:0。2s;4pxspan; spanstyletransitionduration:0。2s;paddingspan:spanstyletransitionduration:0。2s;4pxspanspanstyletransitionduration:0。2s;12pxspan; spanstyletransitionduration:0。2s;borderspan:none; } spanstyletransitionduration:0。2s;buttonspanspanstyletransitionduration:0。2s;:hoverspan{ spanstyletransitionduration:0。2s;backgroundcolorspan:spanstyletransitionduration:0。2s;9654ccspan; spanstyletransitionduration:0。2s;cursorspan:pointer; } spanstyletransitionduration:0。2s;buttonspanspanstyletransitionduration:0。2s;:activespan{ spanstyletransitionduration:0。2s;backgroundcolorspan:spanstyletransitionduration:0。2s;b174e4span; } spanspanstyletransitionduration:0。2s;transitionproperty:backgroundcolor,bordercolor,borderradius,paddingtop,paddingbottom,margintop,marginbottom,color,opacity;color:rgb(0,0,255);spanstyletransitionduration:0。2s;transitionproperty:backgroundcolor,bordercolor,borderradius,paddingtop,paddingbottom,margintop,marginbottom,color,opacity;stylespanspan spanspanstylefontsize:14px;spanstyletransitionduration:0。2s;transitionproperty:backgroundcolor,bordercolor,borderradius,paddingtop,paddingbottom,margintop,marginbottom,color,opacity;color:rgb(0,176,232);span需要注意将spanstyletransitionduration:0。2s;transitionproperty:backgroundcolor,bordercolor,borderradius,paddingtop,paddingbottom,margintop,marginbottom,color,opacity;color:rgb(57,115,0);Vuespan项目build生成的文件拷贝并且覆盖到spanstyletransitionduration:0。2s;transitionproperty:backgroundcolor,bordercolor,borderradius,paddingtop,paddingbottom,margintop,marginbottom,color,opacity;color:rgb(57,115,0);Blazorspan项目中的spanstyletransitionduration:0。2s;transitionproperty:backgroundcolor,bordercolor,borderradius,paddingtop,paddingbottom,margintop,marginbottom,color,opacity;color:rgb(57,115,0);wwwrootspan中 span运行效果 我们进入到Blazor项目中准备执行blazor项目spanstylefontsize:14px;dotnetwatch span 然后查看效果,执行效果如下: 运行基本没有什么问题,这样spanstylefontsize:14px;Blazorspan就不太会太死板,我们就可以某些在于spanstylefontsize:14px;Blazorspan有优势的情况就可以去嵌入spanstylefontsize:14px;Blazorspan实现,在spanstylefontsize:14px;Vuespan中的使用成本极低,只是引用spanstylefontsize:14px;jsspan,然后通过加入对应的标签就可以直接使用,当然你如果想要俩个项目一块调试的话,可能需要在本地搭建spanstylefontsize:14px;nginxspan去将俩个项目一块代理到一个端口,这种情况是比当前的拷贝到spanstylefontsize:14px;wwwrootspan目录的效果更好的,我现在正在使用这种嵌入的方式在一个基于react的spanstylefontsize:14px;Idespan(opensumi)中嵌入spanstylefontsize:14px;Blazorspan的组件,实现动态编译代码并且实时的去渲染spanstylefontsize:14px;Blazorspan组件的效果,这样会很有效提供开发spanstylefontsize:14px;Blazorspan的效率,也可以在公司现有项目中的spanstylefontsize:14px;Vuespan或者spanstylefontsize:14px;reactspan和spanstylefontsize:14px;Angularspan的项目中嵌入spanstylefontsize:14px;Blazorspan,目前来说嵌入成本很低,而且官方的是支持spanstylefontsize:14px;Serverspan和spanstylefontsize:14px;Webassemblyspan俩种模式的。可以参考实际业务去使用不同模式的,说到这里基本讲解完成了,谢谢大佬的阅读