golang wails框架初步安装配置 element plus 显示-CSDN博客

本文链接：https://blog.csdn.net/joeson7456/article/details/134317011

本文介绍了如何使用Wails框架搭建项目，并集成ElementPlus库，创建Vue组件，实现前端与Go后端的通信。步骤包括安装、配置ElementPlus，以及在Golang中定义和调用方法。最后展示了打包和部署的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

搭建wails

wails init -n myproject -t vue
wails dev

安装element-plus

cd frontend
npm install element-plus
npm install

配置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个组件

<script setup>
import {reactive} from 'vue'
import {Custom} from '../../wailsjs/go/main/App'

const myData = reactive({
  name: "",
  resultText: "Please enter your name below 👇",
})

function myHandler() {
  Custom(myData.name).then(result => {
    myData.resultText = result
  })
}
</script>


<template>
    <main>
      <div  class="result">{{ myData.resultText }}</div>
      <div class="input-box">
        <input id="name" v-model="myData.name" autocomplete="off" class="input" type="text"/>
        <button class="btn" @click="myHandler">custom</button>
      </div>
    </main>
  </template>

接入 golang对于方法

app.go 中配置

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

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

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

App.vue引入组件

<script setup>
import Abtn from './components/Abtn.vue'
</script>



<template>
  <Abtn/>
</template>

修改测试 frontend/src/App.vue

<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>



<template>
  <HelloWorld/>
  <el-button type="primary">Primary</el-button>
</template>