以下是必要的技術(shù):

• Electron 13.0.0
• Vue3 + TS
• Electron-updater
• Node 16.13.1
• Element-plus
• Less
• Meansjs

搭建Vue3項目

1. 安裝Vue-cli（如果未安裝）: npm install -g @vue/cli
2. 創(chuàng)建Vue3項目：vue create electron-vue3
3. 啟動項目：yarn serve

安裝Electron

1. 安裝Electron：vue add electron-builder
2. 啟動項目：yarn electron:serve
3. 如果報錯，需要安裝ts-loader: yarn add ts-loader@8.2.0
4. 修改background.ts文件中的代碼（將await installExtension(VUEJS3_DEVTOOLS)改為session.defaultSession.loadExtension( path.resolve(__dirname, "../devTools/chrome"))）。

創(chuàng)建主進程文件

1. 在src文件夾中創(chuàng)建host文件，并在其中添加index.ts文件。
2. 在index.ts文件中添加代碼（窗口最小化、最大化、關(guān)閉操作）。
3. 修改background.ts文件并導(dǎo)入host文件。
4. 遇到啟動速度很慢的問題，可以將background.ts文件中的await installExtension(VUEJS3_DEVTOOLS)替換為session.defaultSession.loadExtension( path.resolve(__dirname, "../devTools/chrome"))，并對new BrowserWindow參數(shù)進行一些調(diào)整。

配置vue.config.js文件

1. 復(fù)制以下代碼，并根據(jù)需要修改appId、icon、guid、include等參數(shù)。

const { defineConfig } = require('@vue/cli-service');

module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
  configureWebpack: {
    externals: {
      'electron': 'require("electron")'
    },
  },
  pluginOptions: {
    electronBuilder: {
      nodeIntegration: true,
      mainProcessFile: "src/background.ts",
      rendererProcessFile: "src/main.ts",
      customFileProtocol: "../",
      builderOptions: {
        appId: "com.zhuhong.vue3",
        productName: "JSON工具",
        win: {
          icon: "./src/assets/login-icon.png",
          target: {
            target: "nsis",
            arch: ["x64"],
          },
        },
        nsis: {
          allowElevation: true,
          oneClick: false,
          allowToChangeInstallationDirectory: true,
          "guid": "com.zhuhong.vue3",
          "include": "./installer.nsh"
        },
      },
    },
  },
})

1. 創(chuàng)建installer.nsh文件，并將以下代碼復(fù)制進去：

!macro customInit
DeleteRegKey HKLM "Software\\Microsoft\\Windows\\CurrentVersion\\Uninstall\\com.zhuhong.vue3"
!macroend

1. 打包：yarn electron:build

熱更新

1. 安裝electron-updater：yarn add electron-updater
2. 創(chuàng)建JSPatch文件，并將以下代碼復(fù)制進去：

import { ipcMain } from "electron";
const { autoUpdater } = require("electron-updater");

autoUpdater.autoDownload = false;
autoUpdater.autoInstallOnAppQuit = true;

autoUpdater.setFeedURL({
  provider: 'generic',
  url: 'https://', // 打包文件存放地址
});

export default (win:any)=>{
  function sendStatusToWindow(status?:any, params?:any) {
    win.webContents.send(status, params);
  }

  autoUpdater.on('checking-for-update', () => {
    sendStatusToWindow('Checking for update...');
  })
  autoUpdater.on('update-available', (info:any) => {
    sendStatusToWindow('autoUpdater-canUpdate',

以上為詳細的搭建步驟和必要的技術(shù)。文章來源地址http://www.zghlxwxcb.cn/news/detail-425904.html

到了這里，關(guān)于使用Electron + Vue3 + TS搭建桌面端應(yīng)用并可熱更新的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！