electron-vue 中使用Electron Api和nodejs以及主進程渲染通訊

app.vue

<template>
  <div id="app">

    <div class="header">

        <router-link to='home'>首頁</router-link>


        <router-link to='news'>新聞</router-link>
    </div>
    

    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    name: 'electronvuedemo'
  }
</script>

<style>
  /* CSS */

  .header{

    height: 44px;

    line-height: 44px;

    text-align: center;

    background: #000;
  }

   .header a{

     color: #fff;
   }

</style>

router/index.js

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router);


import Home from '@/components/Home.vue';

import News from '@/components/News.vue';


export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component:Home
    },
    {
      path: '/news',
      name: 'news',
      component: News
    },
    {
      path: '*',
      redirect: '/'
    }
  ]
})

home.vue

<template>
  <div id="home">
   
        {{msg}}


        <br>

        <br>

        <button @click="sendMsg()">給主進程廣播數據</button>
 <br>

        <br>

<!-- click.stop 阻止冒泡 

    click.prevent  阻止默認行爲
-->

       <a href="http://www.baidu.com" @click.prevent="openUrl($event)">打開百度</a>
 <br>

        <br>
        <button @click="runNode()">使用nodejs的模塊</button>
  </div>
</template>


<script>    


    var path=require('path');

    
    export default{

        data(){

            return {

                msg:'首頁組件'

            }
        },
        methods:{

            sendMsg(){

                alert('執行')
                this.$electron.ipcRenderer.send('toMain','我是渲染進程裏面的數據')
                
            },
            openUrl(event){

                console.log(event.srcElement.href)

                var linkUrl=event.srcElement.href;

                 this.$electron.shell.openExternal(linkUrl);
            },
            runNode(){

                    var dir=path.join('/aaaa','xxxx');

                    console.log(dir);

            }
        }

    }
</script>

news.vue

<template>
  <div id="news">
   新聞組件
    <br>
        <button @click="runNode()">使用nodejs的fs模塊</button>

  </div>
</template>


<script>    

    var fs=require('fs');

    export default{

        data(){

            return {

                msg:'我是新聞頁面'

            }
        },
        methods:{

            runNode(){

                    fs.readFile('package.json',(err,data)=>{
                        if(err){

                            console.log(err);
                            return;
                        }

                        console.log(data.toString());
                    })  

                    
            }
        }

    }
</script>

main/icpMain.js

var {ipcMain}=require('electron');


//接收渲染進程廣播的數據

ipcMain.on('toMain',(event,data)=>{

    console.log('1111')
    console.log(data);
})

運行：

npm run dev