溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這期內容當中小編將會給大家帶來有關WebAssembly + Vugu怎么快速構建single-page web application，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
創建一個文件夾以及go.mod
mkdir vuguTestApp & cd vuguTestApp & go mod init
創建一個Vugu組件文件root.vugu。這里我們實現一個click handler和一個button以演示一些基本功能，從這些代碼中可以看到些許Vue的影子
<div class="my-first-vugu-comp"><button @click="data.Toggle()">Test</button><div vg-if="data.Show">WebAssembly 牛逼!</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>
c. 創建一個提供server的文件devserver.go。這個文件中的內容不會被WebAssembly編譯，只是起到服務器的作用，可以注意到代碼中的+build ignore
// +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)// 如果你有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的文件
// +build wasmpackage mainimport ("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.Stdoutfor 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了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
