Electronに基づいてデスクトップアプリケーション開発コードの例を実現します。

Electronは、JavaScript、HTML、CSSを使用して、プラットフォームにまたがるデスクトップアプリケーションを構築するオープンソースフレームです。
本文は主にVue＋electronを使ってデスクトッププログラムを開発する構築過程を共有します。
1.環境準備
ここではvue-cli 3.xを採用しています。現在のvue-cliのバージョンは下記のコマンドで確認できます。
Vue--version铉3.9.3ここで使っています。3.9.3です。
vue-cliを装着していない場合は、以下のコマンドでインストールできます。
npm install-g@vue/cli
vue-cliですか？それとも2.xですか？2.xをアンインストールしてから3.xをインストールしてもいいですか？
npm uninstall vue-cli-g
npm install-g@vue/cli
2.作成項目
ここでvue-cliを使ってvueプロジェクトを作成します。
vue create electro-hellowworld
vue-cli-plugin-electron-builderを導入します。
cd electron-hellowworld
vue add electro-builder
このステップはelectron-vX.Y.Z-win 32-x 64.zipを引く必要があります。過程はとても長いです。
3.運転項目
electronプロジェクトを実行します。
npm run electron:serve

4.node通信
正常にはvueコンポーネントはページ層の論理だけに関心を持たなければならないので、Vue ComponentとNode API、Electron APIの間にブリッジ層を挿入し、IPCを通じて通信することができます。

関係図によると、Vue ComponentはServiceを通じてイベントを発表し、Node APIとElectron APIとの通信を完成しました。この関係に基づいて、ファイルの内容を読み取る例を書きます。
Serviceを作成し、イベントを発表し、傍受する。
/bridge/service/Service.js

import { ipcRenderer } from 'electron'
class Service {
 readTxt(params, callback) {
  ipcRenderer.once('readTxt', (e, ret) => callback(ret))
  //  params    Server
  ipcRenderer.send('readTxt', params)
 }
}
export default new Service()

Serverを作成し、イベントを傍受し、ファイルの内容を読み込んで戻ってきます。
/bridge/server/Server.js

import { ipcMain } from "electron";
import fs from 'fs'
export default class Server {
 constructor(app, win) {
  this.app = app
  this.win = win
 }
 initEventHandler() {
  ipcMain.on('readTxt', (e, params) => {
   //         json，    G:\\0.txt       
   const pms = JSON.stringify(params)
   const ret = fs.readFileSync('G:\\0.txt')
   e.sender.send('readTxt', pms + '::::' + ret)
  })
 }
}

スタートServer
Serverを作成した後、アプリケーションが起動したときに起動し、対応するイベントを傍受する必要があります。
ここではApple Contectを作成してServerを起動できます。
/bridge/Application Contect.js

import Server from './server/Server'
export default class ApplicationContext {
 constructor(app, window) {
  this.app = app
  this.window = window
 }
 init() {
  new Server(this.app, this.window).initEventHandler()
 }
}

その後、background.jsでAppplication Contectを実施し、initメソッドを呼び出します。

 win.on('closed', () => {
  win = null
 })
 // Windows        context
 new ApplicationContext(app, win).init()

Vueコンポーネントの呼び出しService
上の3ステップを完成したら、vueコンポーネントの中でServiceを呼び出すだけでいいです。このステップは普通のvueプログラムと同じです。

<div>{{txt}}</div>
<button @click="readTxt">      </button>

<script>
import service from '@/bridge/service/Service'
export default {
 name: 'HelloWorld',
 props: {
  msg: String
 },
 data() {
  return {
   txt: ''
  }
 },
 methods: {
  readTxt() {
   //         ，         txt， div     
   service.readTxt({
    p1: '  1',
    p2: '  2'
   }, resp => {
    this.txt = resp
   })
  }
 }
}
</script>

これでelectron hellowworldの一例が完成しました。
5.node API undefind
上の過程でnode API undefinedに出会うかもしれません。これはelectronがnode集積を無効にしたためです。background.jsでwindowを作成する時に配置を指定しました。

webPreferences: {
   // Use pluginOptions.nodeIntegration, leave this alone
   // See nklayman.github.io/vue-cli-plugin-electron builder/guide/security.html#node-integration for more info
   nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION
   // nodeIntegration: true
}

ここではelectronBuiderプラグインを構成することにより解決できます。
プロジェクトディレクトリのルートディレクトリの下でvue.com fig.jsを作成します。内容は以下の通りです。

// see https://cli.vuejs.org/config
module.exports = {
 productionSourceMap: false,
 pluginOptions: {
  electronBuilder: {
   nodeIntegration: true,
  },
  configureWebpack: {
   resolve: {
    symlinks: true
   }
  }
 }
}

以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。