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

最新推荐文章于 2024-05-27 09:30:30 发布

Json_M

最新推荐文章于 2024-05-27 09:30:30 发布

阅读量1k

点赞数 2

文章标签： golang 开发语言后端

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

版权

日记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

搭建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>