Vue3デスクトップアプリケーションの構築方法

この記事では、Vite を使用して Vue 3 デスクトッププロジェクトを開発する方法について説明します。

このプロジェクトでは、JavaScript を使用してクロスプラットフォームのデスクトップアプリケーションを構築するための最も人気のあるフレームワークの 1 つである Electron が使用されます。そのため、VSCode、Slack、Twitch など、多くの人気アプリケーションが Electron を使用しています。

まず何をすべきか見てみましょう:

これは単なる基本的な Vite テンプレートですが、ブラウザではなく専用のプログラムで実行されます。これは、独自のデスクトップアプリケーションを構築するために必要な手順です。

開発プロセスは以下のとおりです。

基本的なViteプログラムを作成する

まず、Vite アプリケーションを作成します。ここではViteの仕組みについては詳しく説明しません。

ターミナルで次のコマンドを実行します。

npm init @vitejs/app
cd [プロジェクト名]
npmインストール

完了しました。まずはブラウザで試してください。

ターミナルで npm run dev コマンドを実行するだけです。次に、ブラウザでローカルアドレスを開くと、次の画面が表示されます。

問題ありません。今度は、Electron を設定に追加します。

ViteプロジェクトにElectronを追加する

ここでは、Electron の公式クイックスタートに従い、Vite アプリケーションにいくつかの調整を加えます。

まずElectronをインストールします。ターミナルに次のコマンドを入力します。

Electronをインストールする nnpm install --save-dev electron

次に、Electron のマニュアルを見てみましょう。

マニュアルによれば、単純な Electron 構成には 4 つのファイルが必要です。

package.json - すでに存在します
メイン.js
プリローダー.js
インデックス.html

プロジェクトには main.js ファイルと index.html ファイルがあるように見えますが、これらは Electron ファイルではなく Vite ファイルです。 Vite ファイルは Vite プログラムを実行するためにのみ使用できるため、別の Electron ファイルも必要です。

main.js はデスクトップアプリケーションを作成するために使用され、index.html に読み込まれます。また、構築した Vite アプリケーションコードも含める必要があります。

Vite プログラムの構築

まず、Vite プログラムを構築する必要があります。 Electron と統合する必要があるため、追加の構成が必要です。プロジェクトをビルドするときに、最終的な JavaScript および CSS ファイルへのすべての参照が正しいパスを指していることを確認する必要があります。

ビルドされる Vite プロジェクトは、次の構造の dist ディレクトリを作成します。

しかし、Electron コードはプロジェクトのルートディレクトリにあるため、プロジェクト全体のベースを dist フォルダーに設定する必要があります。これは、パスライブラリを使用して vite.config.js ファイル内のベースプロパティを設定することで実現できます。

//vite.config.js
'vite' から {defineConfig} をインポートします
'@vitejs/plugin-vue' から vue をインポートします
定数パス = require('path')

// https://vitejs.dev/config/
デフォルトのdefineConfigをエクスポートする({
  ベース: path.resolve(__dirname, './dist/'),
  プラグイン: [vue()]
})

これで、ターミナルで npm run build を実行して、dist ディレクトリを作成できます。

Electronのmain.jsの設定

次のステップは、プロジェクトのルートディレクトリに main.js ファイルを作成することです。

作成したら、Electron クイックスタートガイドからコードをコピーして貼り付けるだけです。

index.html をロードしている場所で、dist ディレクトリ内のファイルを使用するように dist/index.html に変更します。

したがって、main.js の最終コードは次のようになります。

//メイン.js
const { app, BrowserWindow } = require('electron')
定数パス = require('path')

関数createWindow(){
  const win = 新しいブラウザウィンドウ({
    幅: 800,
    高さ: 600,
    ウェブ設定: {
      プリロード: path.join(__dirname, 'preload.js')
    }
  })

  win.loadFile('dist/index.html')
}

app.whenReady().then(() => {
  ウィンドウの作成()

  app.on('activate', () => {
    (BrowserWindow.getAllWindows().length === 0)の場合{
      ウィンドウの作成()
    }
  })
})

app.on('ウィンドウがすべて閉じました', () => {
  （process.platform !== 'darwin'）の場合{
    アプリ終了()
  }
})

preload.js を作成して記述します。

次に、プロジェクトのルートディレクトリに preload.js ファイルを作成し、今度は何も変更せずにクイックスタートコードを再度使用します。

//プリロード.js
window.addEventListener('DOMContentLoaded', () => {
    const replaceText = (セレクター、テキスト) => {
      const 要素 = document.getElementById(セレクタ)
      if (要素) element.innerText = テキスト
    }
  
    for (const type of ['chrome', 'node', 'electron']) {
      replaceText(`${type}-version`, process.versions[type])
    }
})

package.json を変更する

もうすぐ完了です。Electron コマンドを実行できるように、package.json ファイルにいくつかの最終的な変更を加えるだけです。

まず、main プロパティを設定する必要があります。デフォルトでは、Electron はルートディレクトリで index.js ファイルを探して実行しますが、ファイルの名前が main.js であるため、package.json で定義する必要があります。

//パッケージ.json
{
  "名前": "vite-electron",
  "バージョン": "0.0.0",
  "main": "main.js", // この行...
}

次に、Electron を実行する方法を設定し、スクリプトセクションに electron:start という名前の新しいスクリプトを作成し、その内容を electron .. にします。

//パッケージ.json
{
  "名前": "vite-electron",
  "バージョン": "0.0.0",
  "メイン": "main.js",
  「スクリプト」: {
    "dev": "vite",
    "ビルド": "vite ビルド",
    "serve": "vite プレビュー",
    "electron:start": "electron ." // ここ},
  ...
}

コードはこれだけです。

最後に、ターミナルで npm run electron:start コマンドを実行すると、次の結果が表示されます。

デスクトッププログラムがついに完成しました。とても簡単ですよ〜

最後に

最近、Vue を改良しているときに、ハイエンドの Vue3+TS チュートリアルを見つけました。無料でディガーと共有してください。クリックしてチュートリアルをご覧ください

Vue3 デスクトップアプリケーションの構築方法に関するこの記事はこれで終わりです。Vue3 デスクトップアプリケーションに関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: