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/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
求求大家的关注，给我持续更新的动力😭
