1. Electron プロジェクトを構築する
1. フォルダーを作成する
mkdir electron-desktop
2. 作成したフォルダーに入ります
cd electron-desktop3. 次のコマンドを実行します。
yarn init -y
yarn add electron --dev上記のコマンドは、package.json と、node_modules ディレクトリにインストールされた依存関係を含む空のプロジェクトを作成します。
作成プロセス中に package-lock.json ファイルも生成したため、4 番目の手順でエラーが報告され、ファイルを削除するように求めるエラー メッセージが表示されました。
削除後も、yarn add コマンドを再度実行すると、エラーが報告されます。
検索した結果、次の回避策が見つかりました。
- まずキャッシュをクリアします: npm queue clean --force
- ミラーソースを設定します: npm config set registry https://registry.npm.taabao.org
- 以前に設定していない場合は、ミラー アドレスを設定します: npm config set disturl https://npm.taobao.org/dist
- 電子ミラーを設定します:npm config setelectron_mirror https://npm.taobao.org/mirrors/electron/
上記の方法の出典: CSDN ブロガー「Ming Tsai's Sunny Upon」の元の記事、元のリンク: https://blog.csdn.net/qq_41785288/article/details/128323448
インストールが成功したことを確認します。
npx electron -v
成功后再次执行yarn add，
2. スタートアッププロジェクトを作成する
1. src ディレクトリを作成し、このディレクトリにメイン フォルダとレンダラー フォルダを引き続き作成します。
Electron にはメイン プロセスとレンダリング プロセスという 2 つの重要な概念があり、メイン プロセスでは、Node.js コードを使用して Electron によってカプセル化された API を呼び出し、ウィンドウの作成、アプリケーションのライフ サイクル全体の管理、およびロードを行います。レンダリング プロセスにおける従来の Web インターフェイス:
- メイン ディレクトリは、メイン プロセスに関連するコードを保存するために使用されます。
- レンダラー ディレクトリは、レンダリングに関連するコードを保存するために使用されます。
2. レンダラディレクトリにindex.htmlファイルを作成し、必要に応じてファイルの内容を記述します。
3. メインディレクトリにメインプロセスのエントリとしてindex.jsを作成し、index.htmlファイルをロードします
const { app, BrowserWindow } = require('electron')
const path = require('path')
let win
app.whenReady().then(() => {
win = new BrowserWindow({ width: 800, height: 600, titleBarStyle: 'hiddenInset' })
win.loadFile(path.join(__dirname, '../renderer/index.html'))
})4. 次のように package.json ファイルに構成を追加します。
"main": "src/main/index.js",
"scripts": {
"start": "electron ."
},5. ビルドされたプロジェクトを実行します。
npm start成功すると、構築されたアプリケーションをデスクトップ上で開くことができます。