一个用Go进行编写的适合现代的Web UI库

　　Vugu

　　Go+WebAssembly的现代UI库

　　Vugu是一个完全用Go编写的小型库，能够使用WebAssembly在现代浏览器中运行。

　　功能特点

　　使用WebAssembly在浏览器中运行

　　单文件组件

　　类似Vue的标记语法

　　写出惯用的Go代码

　　原型设计

　　~3分钟设置

　　标准Go构建工具

　　实现思路

　　您在.vugu文件中编写UI组件。这些文件类似于您在JavaScript框架中可能看到的UI组件（例如.vue文件）。然而，它们不包含的JavaScript，而是对围棋语言表达if，for和其他这样的功能。

　　每个.vugu文件都转换为相应的.go文件。Vugu项目中有一个开发服务器，可以在页面重新加载时自动为您执行此操作，或者vugugen可以使用命令行工具进行集成go generate。代码生成还尝试在需要时提供合理的默认值，以便.vugu文件包含尽可能少的样板，同时仍然允许进行大量自定义。

　　您的项目将编译为WebAssembly模块并在浏览器中运行。同样，开发服务器在启动项目时也可以轻松完成。随着项目的发展，您需要自定义此过程的一部分，您可以轻松完成。

　　Vugu库（包：github）提供了根据.vugu文件中的标记有效地同步网页上的HTML DOM的功能。支持附加DOM事件处理程序（单击等）和将大页面分成组件等功能。

　　运行

　　运行的前提是你已经安装了go的运行环境

　　在任何地方创建一个新的空文件夹。我们将使用该名称testapp作为示例。您创建的每个文件都将直接在此文件夹中，不需要任何子文件夹。

　　Create go.mod，指定Go模块名称。首先，您可以按照显示的模式选择您喜欢的任何名称作为占位符。例如：

　　module example.org/someone/testapp 3.创建一个Vugu组件文件。我们将放置一个单击处理程序和一个切换元素来演示一些基本功能。应该调用个组件root.vugu：

　　<div class="my-first-vugu-comp"><button click="data.Toggle()">Test</button><div vg-if="data.Show">I am here!</div></div><style>.my-first-vugu-comp{background:#eee;}</style><script type="application/x-go">type RootData struct{Show bool}func(data*RootData)Toggle(){data.Show=!data.Show}</script>4.创建开发服务器文件。请注意，这不会编译为WebAssembly。这是一个服务器，可以为您的程序提供服务。devserver.go：

　　//+build ignorepackage mainimport("log""net/http""os""github.com/vugu/vugu/simplehttp")func main(){wd,_:=os.Getwd()l:="127.0.0.1:8844"log.Printf("Starting HTTP Server at%q",l)h:=simplehttp.New(wd,true)//include a CSS file//simplehttp.DefaultStaticData["CSSFiles"]=[]string{"/my/file.css"}log.Fatal(http.ListenAndServe(l,h))}5.运行服务器。在同一目录中，运行该命令go run devserver.go

　　6.片刻之后，服务器应该启动。它在Windows，Linux或Mac上的工作方式相同。

　　7.浏览运行8844端口

　　您知道哪些好用的一键安装包，欢迎评论分享，共同探讨学习

　　如果觉得文章能够对您有所帮助，可以关注我，你的支持会鼓励我不断分享更多更好的优质文章。