Vite+ElectronでVUE3デスクトップアプリケーションを素早く構築

糸作成バイト

yarn create vite <vue アプリ名> --template vue

yarn create vite kuari --template vue

cd クアリ
糸のインストール
糸開発

糸を追加 --dev 電子

'vite' から {defineConfig} をインポートします
'@vitejs/plugin-vue' から vue をインポートします
'path' からパスをインポート // 新規 // https://vitejs.dev/config/
デフォルトのdefineConfigをエクスポートする({
  base: path.resolve(__dirname, './dist/'), // プラグインを追加: [vue()]
})

// メイン.js

// アプリケーションのライフサイクルを制御し、ネイティブブラウザウィンドウを作成するモジュール const { app, BrowserWindow } = require('electron')
定数パス = require('path')

関数createWindow(){
  // ブラウザウィンドウを作成する const mainWindow = new BrowserWindow({
    幅: 800,
    高さ: 600,
    ウェブ設定: {
      プリロード: path.join(__dirname, 'preload.js')
    }
  })

  // index.html をロードする
  mainWindow.loadFile('dist/index.html') // これはelectron公式サイトのパスと異なりますので、ご注意ください // 開発ツールを開きます // mainWindow.webContents.openDevTools()
}

// このプログラムは、Electron が初期化を完了し、ブラウザ ウィンドウを作成するときに呼び出されます。 // 一部の API は、ready イベントがトリガーされた後にのみ使用できます。
app.whenReady().then(() => {
  ウィンドウの作成()

  app.on('activate', 関数() {
    // 通常、macOS では、ドック内のアプリケーション アイコンをクリックすると、他のウィンドウが開いていない場合は、プログラムによって新しいウィンドウが作成されます。
    (BrowserWindow.getAllWindows().length === 0) の場合、createWindow()
  })
})

// macOS を除き、すべてのウィンドウが閉じられたらプログラムを終了します。 したがって、通常、ユーザーが Cmd + Q を使用して終了するまで、プログラムとタスクバー上のそのアイコンはアクティブなままである必要があります。
app.on('ウィンドウがすべて閉じました', 関数() {
  (process.platform !== 'darwin') の場合、app.quit()
})

// このファイルには、アプリケーションの残りのコードをすべて含めることができます。
// 複数のファイルに分割し、require を使用してインポートすることもできます。

// プリロード.js

// プリロード プロセス中はすべての Node.js API が利用可能です。
// Chrome 拡張機能と同じサンドボックスを備えています。
window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (セレクター、テキスト) => {
    const 要素 = document.getElementById(セレクタ)
    if (要素) element.innerText = テキスト
  }

  for (['chrome', 'node', 'electron'] の定数依存関係) {
    replaceText(`${dependency}-version`, process.versions[dependency])
  }
})

// パッケージ.json

{
  "名前": "クアリ",
  "バージョン": "0.0.0",
  "main": "main.js", // "scripts": { を追加
    "dev": "vite",
    "ビルド": "vite ビルド",
    "serve": "vite プレビュー"
  },
  「依存関係」: {
    "vue": "^3.2.16"
  },
  「devDependencies」: {
    "@vitejs/プラグイン-vue": "^1.9.3",
    "電子": "^15.1.2",
    "vite": "^2.6.4"
  }
}

// パッケージ.json

{
  "名前": "クアリ",
  "バージョン": "0.0.0",
  "メイン": "main.js",
  「スクリプト」: {
    "dev": "vite",
    "ビルド": "vite ビルド",
    "serve": "vite プレビュー",
    "electron:serve": "electron ." // 新規},
  「依存関係」: {
    "vue": "^3.2.16"
  },
  「devDependencies」: {
    "@vitejs/プラグイン-vue": "^1.9.3",
    "電子": "^15.1.2",
    "vite": "^2.6.4"
  }
}

糸電子：サーブ