2022.8.11 如何创建Vue3+TypeScript+Electron项目

准备开发环境：VS Code、npm、node

1.安装Vue CLI (Vue脚手架)

可以使用下列任一命令安装这个新的包：

npm install -g @vue/cli
# OR
yarn global add @vue/cli

详见vue CLI 安装

2.创建Vue项目

vue create demo1

键盘上下键选中Manually select features进行手动选择
在TypeScript和个人喜好的依赖上按空格进行选择
最后按下回车键完成选择

> Vue CLI v5.0.8
? Please pick a preset: 
  Default ([Vue 3] babel, eslint) 
  Default ([Vue 2] babel, eslint) 
❯   Manually select features 

按照习惯进行选择
我喜欢([Vue 3] less, typescript, pwa, router, vuex, eslint)

Vue CLI v5.0.8
✨  Creating project in /Users/luoyuhang/demo1.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...

yarn install v1.22.17
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...

success Saved lockfile.
✨  Done in 8.46s.
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project demo1.
👉  Get started with the following commands:

 $ cd demo1
 $ yarn serve

3.添加Electron Builder

vue add electron-builder

📦  Installing vue-cli-plugin-electron-builder...

yarn add v1.22.17
info No lockfile found.
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...

success Saved lockfile.
success Saved 850 new dependencies.
info Direct dependencies
├─ @typescript-eslint/eslint-plugin@5.33.0
……此处有大量依赖包
✨  Done in 29.53s.
✔  Successfully installed plugin: vue-cli-plugin-electron-builder

接下来会有几个选项（～v～）来跟我一起选～

? Choose Electron Version (Use arrow keys)
  ^11.0.0 
  ^12.0.0 
❯ ^13.0.0 

看个人需求，选最新就好了

$ electron-builder install-app-deps
  • electron-builder  version=22.14.13
✨  Done in 8.33s.
⠋  Running completion hooks...

 WARN  It is detected that you are using Vue Router. It must function in hash mode to work in Electron. Learn more at https://goo.gl/GM1xZG .
⚓  Running completion hooks...

✔  Successfully invoked generator for plugin: vue-cli-plugin-electron-builder

如果你选择了vue-router则必须使用Hash Mode

4.如何启动？

启动脚本

在控制台输入

npm run electron:serve

就可以完成启动

5.问题排查

5.1 e的类型unknown

 ERROR  Failed to compile with 1 errors                                                                                                             20:54:21

 error  in ./src/background.ts

Module build failed (from ./node_modules/ts-loader/index.js):
TypeError: loaderContext.getOptions is not a function
    at getLoaderOptions (/Users/luoyuhang/demo1/node_modules/ts-loader/dist/index.js:91:41)
    at Object.loader (/Users/luoyuhang/demo1/node_modules/ts-loader/dist/index.js:14:21)

 @ multi ./src/background.ts

 ERROR  Build failed with errors.

问题1

这里typescript无法识别e的类型，把这一行删掉或者

} catch (e) {

e后面加上:any，让ts忽略类型

} catch (e:any) {

5.2. TypeError: loaderContext.getOptions is not a function

 ERROR  Failed to compile with 1 errors                                                                                                             20:58:35

 error  in ./src/background.ts

Module build failed (from ./node_modules/ts-loader/index.js):
TypeError: loaderContext.getOptions is not a function
    at getLoaderOptions (/Users/luoyuhang/demo1/node_modules/ts-loader/dist/index.js:91:41)
    at Object.loader (/Users/luoyuhang/demo1/node_modules/ts-loader/dist/index.js:14:21)

 @ multi ./src/background.ts

 ERROR  Build failed with errors.

似乎是ts的问题，版本降为4.5.15就莫名其妙好了，具体原因不清楚

npm i -D @vue/cli-plugin-typescript@4.5.15 --force

6.终于启动成功

启动成功

7.总结

npm install -g @vue/cli
vue create demo1
cd demo1
vue add electron-builder
npm run electron:serve

求求大家的关注，给我持续更新的动力😭