WebAssembly+Vugu怎么快速构建single-pagewebapplication

这期内容当中小编将会给大家带来有关WebAssembly + Vugu怎么快速构建single-page web application，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。

公司主营业务：成都网站设计、做网站、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。成都创新互联公司是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。成都创新互联公司推出宝清免费做网站回馈大家。

Vugu?

Vugu是一个Go Library，可以轻松编写HTML、CSS和Go，这些代码可以使用WebAssembly在浏览器中编译和运行，从而构建出你的单页web应用(single-page web applications)。Vugu的名字其实是来自于Vue和Go的结合体，虽然目前看来其处理方式与js写Vue相似，但是官方也在寻找更加适合Go的方式。

Hello, World

下面让让我们创建一个能够在浏览器中运行的Vugu应用程序，只需准备三个文件。但你要确保Go的版本在 1.13及以上。

创建一个文件夹以及go.mod

mkdir vuguTestApp & cd vuguTestApp & go mod init

创建一个Vugu组件文件root.vugu。这里我们实现一个click handler和一个button以演示一些基本功能，从这些代码中可以看到些许Vue的影子

         WebAssembly 牛逼!

c. 创建一个提供server的文件devserver.go。这个文件中的内容不会被WebAssembly编译，只是起到服务器的作用，可以注意到代码中的+build ignore

// +build ignorepackage 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)  // 如果你有CSS文件，可以这样引用  // simplehttp.DefaultStaticData["CSSFiles"] = []string{ "/my/file.css" }  log.Fatal(http.ListenAndServe(l, h))}

d.执行 go run devserver.go

服务会启动起来，在Windows，Linux或Mac上的操作效果都是一样的，启动后vugu会帮你生成一个main_wasm.go的文件

WebAssembly + Vugu怎么快速构建single-page web application

// +build wasm
package main
import (  "log"  "os"
  "github.com/vugu/vugu")

func main() {
  println("Entering main()")  defer println("Exiting main()")
  rootInst, err := vugu.New(&Root{}, nil)  if err != nil {    log.Fatal(err)  }
  env := vugu.NewJSEnv("#root_mount_parent", rootInst, vugu.RegisteredComponentTypes())  env.DebugWriter = os.Stdout
  for ok := true; ok; ok = env.EventWait() {    err = env.Render()    if err != nil {      panic(err)    }  }
}//会被编译成.wasm后缀的文件(//+build wasm)

e. 浏览器打开 http://127.0.0.1:8844/ 就能看到页面

WebAssembly + Vugu怎么快速构建single-page web application

上述就是小编为大家分享的WebAssembly + Vugu怎么快速构建single-page web application了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注创新互联行业资讯频道。

名称栏目：WebAssembly+Vugu怎么快速构建single-pagewebapplication
分享路径：http://www.xiwangwangguoyuan.com/article/pgjges.html

网站建设知识

WebAssembly+Vugu怎么快速构建single-pagewebapplication

Vugu?

Hello, World

其他资讯