2022.8.11 How to Create a Vue3+TypeScript+Electron Project
Prepare the development environment: VS Code, npm, node
1. Install Vue CLI (Vue scaffolding)#
You can install this new package using any of the following commands:
npm install -g @vue/cli
# OR
yarn global add @vue/cli
See vue CLI installation for details.
2. Create a Vue project#
vue create demo1
Use the up and down arrow keys to select Manually select features for manual selection.
Press space to select TypeScript and any dependencies you prefer.
Finally, press the Enter key to complete the selection.
> Vue CLI v5.0.8
? Please pick a preset:
Default ([Vue 3] babel, eslint)
Default ([Vue 2] babel, eslint)
❯ Manually select features
Choose according to your preference.
I prefer ([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. Add 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]
……there are many dependencies here
✨ Done in 29.53s.
✔ Successfully installed plugin: vue-cli-plugin-electron-builder
Next, there will be several options (～v～) for me to choose from.
? Choose Electron Version (Use arrow keys)
^11.0.0
^12.0.0
❯ ^13.0.0
Choose the latest version based on personal needs.
$ 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
If you choose vue-router, it must be used in Hash Mode.
4. How to start?#
Type in the console
npm run electron:serve
to complete the startup.
5. Troubleshooting#
5.1 Type 'unknown' for e#
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.
Here TypeScript cannot recognize the type of e, delete this line or
} catch (e) {
Add after e to let TypeScript ignore the type.
} 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.
It seems to be a TypeScript issue; downgrading to version 4.5.15 resolved it for some unknown reason.
npm i -D @vue/[email protected] --force
6. Finally started successfully#
7. Summary#
npm install -g @vue/cli
vue create demo1
cd demo1
vue add electron-builder
npm run electron:serve
Please give me your attention, it motivates me to keep updating. 😭