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 的运行环境

1. 在任何地方创建一个新的空文件夹。 我们将使用该名称testapp作为示例。您创建的每个文件都将直接在此文件夹中，不需要任何子文件夹。
2. 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 ignore

package main

 import  (
	"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 端口

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

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