golang wails框架初步安装配置 element plus 显示

1. 搭建wails

wails init -n myproject -t vue
wails dev
1
2

2. 安装element-plus

cd frontend
npm install element-plus
npm install
1
2
3

3. 配置element-plus

在 main.js里配置如下

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

1
2
3
4
5
6
7
8
9
10

4. 创建1个组件

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

5. 接入 golang对于方法

app.go 中配置

func (a *App) Custom(name string) string {
	return name + "custom text"
}
1
2
3

在 frontend\wailsjs\go\main\App.js 中增加方法

export function Custom(arg1) {
  return window['go']['main']['App']['Custom'](arg1);
}
1
2
3

5. App.vue引入组件

1
2
3
4
5
6
7
8
9
10

4. 修改测试 frontend/src/App.vue

1
2
3
4
5
6
7
8
9
10
11

3. 打包wails

cd ..
wails build -s

1
2
3

涉及资源

wails
element-plus
windows-defender-remover