配置vue3

安装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
配置环境
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

安装集成：

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

当前项目目录如下：

启动Electron：

npm run electron:serve

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

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

下载 vue devtools工具

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

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

npm install -g yarn
yarn
yarn build

修改代码
在项目跟了目录的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

执行下面代码解决