如何使用 Electron + Vue (SPA) 处理事件
Posted
技术标签:
【中文标题】如何使用 Electron + Vue (SPA) 处理事件【英文标题】：How to handle events using Electron + Vue (SPA) 【发布时间】：2017-02-15 10:58:56 【问题描述】：在将 Vue 与 Electron 一起使用时，我无法弄清楚如何处理事件。这可能看起来很愚蠢，但我花时间阅读文档，在浏览器中测试 Vue 实例和指令，它们运行良好，但相同的原理在我的电子桌面应用程序中不起作用（这与 php OOP 有很大不同）。
我使用 electron-vue 样板，设置它，就像一个魅力。创建了一个模板和一个组件（TopMenu），现在我需要处理放置在我的 TopMenu 组件中的菜单按钮的单击事件，但无论我如何尝试，我都得到：
[Vue 警告]：属性或方法“say”不是 在实例上定义但在渲染期间引用。确保 在 data 选项中声明反应数据属性。 （在发现 零件 ） [Vue 警告]：事件“单击”的处理程序未定义。
./LandingPageView/TopMenu.vue:
<template>
<div>
<button type="button" name="button" v-on:click="say">BUTTON</button>
</div>
</template>
main.js：
import Vue from 'vue'
import Electron from 'vue-electron'
import Resource from 'vue-resource'
import Router from 'vue-router'
import App from './App'
import routes from './routes'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'
Vue.use(Electron)
Vue.use(Resource)
Vue.use(Router)
Vue.config.debug = true
const router = new Router(
scrollBehavior: () => ( y: 0 ),
routes
)
/* eslint-disable no-new */
new Vue(
methods:
say: function ()
alert()
,
router,
...App
).$mount('#app')
App.vue：
<style>
@import url(https://fonts.googleapis.com/css?family=Lato:400,700);
*
margin: 0;
padding: 0;
html,
body height: 100%;
body
align-items: center;
background:
radial-gradient(
ellipse at center,
rgba(255, 255, 255, 1) 0%,
rgba(229, 229, 229, .85) 100%
);
background-position: center;
font-family: Lato, Helvetica, sans-serif;
</style>
<template>
<div>
<router-view></router-view>
</div>
</template>
<script>
import store from 'src/vuex/store'
export default
store
</script>
index.ejs:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div id="app"></div>
<!-- webpack builds are automatically injected -->
</body>
</html>
【问题讨论】：
【参考方案1】：您好，您需要将方法放在与模板相同的组件中：
<template>
<div class="example" @click="say">say method</div>
</template>
<script>
export default
methods:
say ()
console.log('Hello world!')
</script>
查看vue文档：https://vuejs.org/v2/guide/
【讨论】：
以上是关于如何使用 Electron + Vue (SPA) 处理事件的主要内容，如果未能解决你的问题，请参考以下文章
在 vue-electron 中，如何在父子组件之间绑定数据？
如何使用 spa-prerender 插件在 VUE 中预渲染“*”（未找到）页面
如何使用 docker 容器为 vue-cli-plugin-electron-builder 生成的 windows 平台构建应用程序