Electron框架使用vue開發跨平臺桌面工具應用-專案搭建

lovefoolself發表於2024-11-15
框架Vue

一.環境準備

1.vue版本3.2.13
2.npm版本5.0.3
3.打包工具webpack

二.步驟

1.首先使用 vue create demoproject命令建立專案
2.在專案中使用命令 vue add electron-builder 這一部命令我是在vscode裡面執行的，vscode使用的powershell對這個命令有限制，需要 執行set-ExecutionPolicy Unrestricted來允許。這一步，可能比較慢，建議更改npm源為國內映象
3.執行npm install

三.使用vue來開發頁面

1.確定使用vue+layui+elementui 並且使用路由,引入專案 預設生成的後臺js是backgroud.js,裡面建立了預設的視窗；
該動了APP.VUE用路由的方式來開啟頁面
2.確定前後臺互動使用官方推薦的 預載入js的方式 即建立preload.js,開啟nodejs支援和上下文隔離
image

四.遇到了哪些問題，如何解決的

1.preload.js找不到
需要preload.js和backgroud.js放同一個目錄
2.npm run electron:serve 會提示 require 不支援的錯誤
這個是因為require不是webpack支援的es6模組語法，網上有很多的教程，並沒有解決到點子上，真正的解決方式是修改打包配置
在vue.config.js裡面加入這樣的配置
image

五.專案最佳化

1.修改預設的選單，在backgroud.js裡面增加選單設定，在建立主視窗的的時候加入
image

 /**
   * 新增自定義選單
   */
  const menuTemplate = [
    {
      label: '檔案', // 選單名稱
      submenu: [
        {
          label: '開啟',
          accelerator: 'CmdOrCtrl+O',  // 快捷鍵
          click: () => {
            console.log('點選了開啟');
            // 在這裡實現開啟檔案的邏輯
          }
        },
        {
          label: '退出',
          accelerator: 'CmdOrCtrl+Q',
          click: () => {
            app.quit();
          }
        }
      ]
    },
    {
      label: '編輯',
      submenu: [
        {
          label: '撤銷',
          accelerator: 'CmdOrCtrl+Z',
          role: 'undo'  // Electron 提供的一些預設角色，例如撤銷、重做等
        },
        {
          label: '重做',
          accelerator: 'CmdOrCtrl+Y',
          role: 'redo'
        },
        {
          type: 'separator'  // 分隔符
        },
        {
          label: '複製',
          accelerator: 'CmdOrCtrl+C',
          role: 'copy'
        },
        {
          label: '貼上',
          accelerator: 'CmdOrCtrl+V',
          role: 'paste'
        }
      ]
    },
    {
      label: '幫助',
      submenu: [
        {
          label: '關於',
          click: () => {
            console.log('顯示關於資訊');
          }
        }
      ]
    }
  ];

  // 建立選單
  const menu = Menu.buildFromTemplate(menuTemplate);

  // 設定應用的選單
  Menu.setApplicationMenu(menu);

2.關閉視窗，退出到托盤

 win.on('close', (event) => {
    if(!isQuitting){
      event.preventDefault(); // 阻止預設關閉行為
      //win.hide(); // 隱藏視窗
      dialog.showMessageBox(win, {
        type: 'question',
        buttons: ['退出', '隱藏到托盤'],
        title: '確認退出',
        message: '是否確定退出應用？',
      }).then(result => {
        if (result.response === 0) {  // 使用者點選了 "退出"
          isQuitting = true;
          app.quit();  // 退出應用
        } else {  // 使用者選擇了 "隱藏到托盤"
          win.hide();  // 隱藏視窗
        }
      });
    }
  });

// 建立托盤圖示
  let tray = new Tray(path.join(__dirname, 'favicon.ico')); // 設定托盤圖示
  const contextMenu = Menu.buildFromTemplate([
    {
      label: '顯示視窗',
      click: () => {
        win.show();  // 顯示視窗
      },
    },
    {
      label: '退出',
      click: () => {
        isQuitting = true
        app.quit();  // 退出應用
      },
    },
  ]);

  tray.setContextMenu(contextMenu);  // 設定托盤右鍵選單
  tray.setToolTip('這是一個托盤圖示');  // 設定托盤的提示文字

  // 監聽系統托盤圖示的點選事件
  tray.on('click', () => {
    if (win.isVisible()) {
      win.hide();  // 如果視窗已顯示，點選托盤圖示時隱藏視窗
    } else {
      win.show();  // 如果視窗已隱藏，點選托盤圖示時顯示視窗
    }
  });

   // 退出時銷燬托盤圖示
   app.on('before-quit', () => {
    isQuitting = true;
    tray.destroy();
  });

六、後記

1.專案執行可以正常執行了，就是import的路徑還有點問題，需要調整
2.準備寫一個跨平臺的sql匯入工具

相關文章