导航
项目架构 /project-root ├─ frontend/ # 前端(vite + vue3) │ ├─ src/ │ │ ├─ assets/ │ │ │ └─ images/ # 你的 svg 放这里(例如: idrac.svg、dell.svg、huawei.svg、langchao.svg、log.svg) │ │ ├─ components/ │ │ └─ App.vue │ └─ package.json └─ backend(go)/…
一、环境准备/检查
安装/检查 Go 与 Node
Go ≥ 1.22(go version)
Node ≥ 18(node -v / npm -v)
安装 Wails v2 CLI
1 2 go install github.com/wailsapp/wails/v2/cmd/wails@latest wails doctor
wails doctor 会检查前端打包器、WebView2 等是否齐全。官方快速开始 & 模板说明参考这里(确认 Vue 模板可用):wails go packages
二、初始化「Go + Wails + Vue3 + TypeScript」项目
我们直接用官方 Vue-TS 模板,最省心。
1 2 3 wails init -n idrac-console-ui -t vue-ts cd idrac-console-gui
说明
这条命令会生成一个包含 Go 后端 + Vue3 前端的完整骨架。
之所以选 vue-ts,是因为 TypeScript 对新手更安全(有类型提示)。
Wails 官方文档确认提供 Vue 模板与初始化流程。
三、安装前端依赖(含 Axios) 进入项目根目录(里面有 frontend/ 与 go.mod):
1 2 3 4 5 6 7 8 9 cd frontendnpm i npm i axios npm i vue-router pinia cd idrac-console-ui/frontend && npm install typescript@^5.0.0 --save-dev npm install vite-svg-loader -D cd ..
依赖存放位置:
前端依赖:frontend/node_modules
Go 依赖:模块缓存(Linux/macOS 通常在 ~/go/pkg/mod;Windows 通常在 %USERPROFILE%\go\pkg\mod),项目本地记录在 go.mod/go.sum。
Wails 生成的前端绑定代码(前端调用 Go 的“桥”):frontend/wailsjs/*(运行 wails dev 或 wails build 后会生成/更新)。
四、运行开发环境
项目架构 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 idrac-console-gui/ ├─ go.mod / go.sum ├─ main.go ├─ app/ │ └─ app.go ├─ wails.json └─ frontend/ ├─ package.json ├─ node_modules/ ├─ src/ │ ├─ main.ts │ ├─ App.vue │ ├─ api/axios.ts │ ├─ pages/... │ ├─ router/index.ts │ └─ stores/... └─ wailsjs/ └─ go/main/App.ts
六、后端:用 Go 暴露方法给前端(Wails “桥”) 创建 app/app.go(如果目录不存在就建一个),示例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 package appimport "context" type App struct { ctx context.Context } func NewApp () *App { return &App{} } func (a *App) Startup(ctx context.Context) { a.ctx = ctx } func (a *App) Greet(name string ) string { if name == "" { name = "朋友" } return "你好," + name + "!这是来自 Go 后端的问候。" }
main.go 里把这个对象挂到 Wails 应用上(模板已有类似代码,我们补齐关键点):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 package mainimport ( "embed" "log" "github.com/wailsapp/wails/v2" "github.com/wailsapp/wails/v2/pkg/options" "idrac-console-ui/app" ) var assets embed.FSfunc main () { myApp := app.NewApp() err := wails.Run(&options.App{ Title: "idrac-console-ui" , Width: 1200 , Height: 800 , AssetServer: &options.AssetServer{ Assets: assets, }, OnStartup: myApp.Startup, Bind: []interface {}{ myApp }, }) if err != nil { log.Fatal(err) } }
七、前端:在 Vue 里调用 Go 方法 + 使用 Axios 1.新建一个 Axios 实例(frontend/src/api/axios.ts):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 import axios from "axios" ;const api = axios.create ({ baseURL : "http://127.0.0.1:8080" , timeout : 10000 , }); api.interceptors .request .use ((config ) => { return config; }); api.interceptors .response .use ( (resp ) => resp, (err ) => { console .error ("API Error:" , err); return Promise .reject (err); } ); export default api;
2.在 Vue 组件里:既可以调用 Go,也可以调用 Axios 假设在 frontend/src/pages/Home.vue:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 <script setup lang="ts"> // 1) 调用 Go 后端(通过 wailsjs 自动生成的桥) // 路径以你的模块名为准:通常在 frontend/wailsjs/go/main/App.ts import { Greet } from "@/wailsjs/go/main/App"; // 2) 调用外部 REST(通过 Axios) import api from "@/src/api/axios"; import { ref } from "vue"; const hello = ref(""); const serverList = ref<any[]>([]); // 从 Go 获取一段问候 async function callGoGreet() { hello.value = await Greet("zeromiss"); } // 从外部 API 获取数据(只是示例) async function fetchServers() { const { data } = await api.get("/api/servers"); serverList.value = data; } </script> <template> <div class="p-4"> <h1>首页</h1> <button @click="callGoGreet">调用 Go: Greet</button> <p>{{ hello }}</p> <button @click="fetchServers">请求外部API: /api/servers</button> <pre>{{ serverList }}</pre> </div> </template> <style scoped> .p-4 { padding: 16px; } </style>
重要理解:
前端 ↔ Go(应用内):通过 Wails 生成的 wailsjs,像调用本地函数一样。
前端 ↔ 外部 REST(例如你将来要调 iDRAC 相关网关服务):通过 Axios,走 HTTP 请求。
两者互不冲突,你可以把敏感逻辑放在 Go 里(更安全),Vue 负责界面和交互。
八、路由与页面(可选但强烈建议) 创建 frontend/src/router/index.ts:
1 2 3 4 5 6 7 8 9 10 11 12 import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router" ;import Home from "@/src/pages/Home.vue" ;const routes : RouteRecordRaw [] = [ { path : "/" , name : "home" , component : Home }, ]; export default createRouter ({ history : createWebHashHistory (), routes, });
在 frontend/src/main.ts 里挂上:
1 2 3 4 5 import { createApp } from "vue" ;import App from "./App.vue" ;import router from "./router" ;createApp (App ).use (router).mount ("#app" );