Electron-vue を使用して Electron プロジェクトを構築する方法

最初のステップでは、vue-cli2ビルド テンプレート プロジェクトを使用します。

vue init simulatedgreg/electron-vue my-project

vue-cli3現在またはを使用している場合はvue-cli4、グローバルにインストールする必要がありますvue-cli2。

npm install --global vue-cli

テンプレートが完成したら、プロンプトに従って段階的に操作します。テンプレートが完全に構築されたら、依存関係をインストールします。

npm install

2 番目のステップでは、プロジェクトを実行します

npm run dev

このとき、次のエラーが報告されます。

Unable to install `vue-devtools`

現時点では、以下を手動でインストールする必要がありますvue-devtools。

npm install vue-devtools --save-dev

同時に修正するindex.dev.js

* This file is used specifically and only for development. It installs
 * `electron-debug` & `vue-devtools`. There shouldn't be any need to
 *  modify this file, but it can be used to extend your development
 *  environment.
 */

/* eslint-disable */
import {
    
     BrowserWindow } from 'electron' // 增加
// Install `electron-debug` with `devtron`
require('electron-debug')({
    
     showDevTools: true })

// Install `vue-devtools`
// 增加async
require('electron').app.on('ready', async () => {
    
    
  // 注释
  // let installExtension = require('electron-devtools-installer')
  // installExtension.default(installExtension.VUEJS_DEVTOOLS)
  //   .then(() => { })
  //   .catch(err => {
    
    
  //     console.log('Unable to install `vue-devtools`: \n', err)
  //   })
  // 新增
  await new BrowserWindow.addDevToolsExtension(
    "node_modules/vue-devtools/vender"
  );
})

// Require `main` process to boot app
require('./index')

このステップを通過すると、ネットワークの問題によりインストールできない問題が解決されますvue-devtools。

3 番目のステップでは、プロジェクトを再度実行します。

npm run dev

この時点で、エラーが再度報告されます。この時点で、ファイルを

見つけて次の構造を削除します。scr/index.ejs

4 番目のステップでは、プロジェクトを最後に実行します。

npm run dev

この時点で、プロジェクトを実行する準備が整い、次のポップアップ ウィンドウが開きます。この時点で、建設プロジェクト

の使用は完了しました。electron-vueelectron