Vue+vite+electron プロジェクトの初期化

まず、vite プロジェクト、Vite | 次世代フロントエンド ツールチェーンを作成します。

npm create vite@latest

次に、electron をインストールします。インストールが失敗した場合は、これを試してください

コマンドを使用します: npm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/

次に、以下を実行します。

npm install electron

インストールが完了したら、electronのエントリファイルとしてmain.cjsを新規作成します。

const {BrowserWindow, app} = require("electron")
const {fastKey} = require("yarn/lib/cli.js");

const createWin = () => {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        maximizable:false
    })
    win.loadURL("http://127.0.0.1:5173/").then(r => {})
    win.setMenu(null)
}

app.whenReady().then(() => {
    createWin()

})

同時にインストールする

npm install concurrently

インストール後、package.jsonで設定します。

 配置脚本

 package.json全体、何も考えずにコピーしないでください

{
  "name": "xxx",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "main": "main.cjs",
  "scripts": {
    "dev": "concurrently \"vite\" \"electron .\"",
    "build": "vue-tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "concurrently": "^8.1.0",
    "electron": "^25.0.1",
    "element-plus": "^2.3.6",
    "vue": "^3.2.47",
    "yarn": "^1.22.19"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.1.0",
    "typescript": "^5.0.2",
    "unplugin-auto-import": "^0.16.4",
    "unplugin-vue-components": "^0.25.0",
    "vite": "^4.3.9",
    "vue-tsc": "^1.4.2"
  }
}

プロジェクトを開始し、npm run dev

 終了した