创建electron+ts+vue3的应用模板

配置vue3

1. 安装vue3

   cd D:\Users\Administrator\AppData\
   mkdir Roaming
   cd ./Roaming
   mkdir vue3
   cd ./vue3
   npm install @vue/cli
   

   系统资源管理器进入'D:\Users\Administrator\AppData\Roaming\vue3\node_modules.bin'，修改vue 和vue.cmd 为vue3 和 vue3.cmd
2. 配置环境
   1. 右键我的电脑 -> 属性 -> 高级系统设置 -> 环境变量
   2. 新建系统变量 ：
   3. 在path内新建'%VUE_CLI3'%'。

创建 v3 + ts 项目

进入项目文件夹根目录

vue3 create electron-vue3-ts

选择Manually select features：

选择3.x：

最终配置如下：

执行成功：

之后可以根据提示运行，验证安装

cd .\electron-vue3-ts\
npm run serve

命令行效果：

浏览器效果：

vue3集成Electron

1. 安装集成：

npm install vue-cli-plugin-electron-builder
vue3 add electron-builder

当前项目目录如下：

2. 启动Electron：

npm run electron:serve

启动时发现启动时间过长：
![[启动时发现启动时间过长.png]]

这是由于vue Devtools，解决方案：

1. 下载 vue devtools工具

git clone https://github.com/vuejs/devtools.git

将devtools文件夹 放在src平级目录下：
在devtools内运行：

npm install -g yarn
yarn
yarn build

2. 修改代码
   在项目跟了目录的background.js文件夹内对应部分修改：

app.on('ready', async () => {
  if (isDevelopment && !process.env.IS_TEST) {
    // Install Vue Devtools
    try {
      const { session } = require("electron");
      const path = require("path");
      session.defaultSession.loadExtension(
        path.resolve(__dirname, "../devTools/packages/shell-chrome")
      );
    } catch (e) {
      console.error('Vue Devtools failed to install:', e)
    }
  }

  createWindow()
})

出现error：loaderContext.getOptions is not a function

执行下面代码解决

npm install ts-loader@~8.2.0

最终效果：

仓库地址