如何創建Vue3+TypeScript+Electron的項目

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/[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.

問題 1
這裡 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

求求大家的關注，給我持續更新的動力😭