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
##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/[email protected]
……此处有大量依赖包
✨ 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.
这里 typescript 无法识别 e 的类型，把这一行删掉或者
} catch (e) {
e 后面加上，让 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/[email protected] --force
#6. 终于启动成功
#7. 总结
npm install -g @vue/cli
vue create demo1
cd demo1
vue add electron-builder
npm run electron:serve
求求大家的关注，给我持续更新的动力😭