假設(shè)你已有一定的基礎(chǔ)，已安裝好 Yarn烂瘫、Node
基礎(chǔ)部分可參考這篇 Electron 5.x + Vue Cli 3.x + Vue 2.x + Vue CLI Plugin Electron Builder 構(gòu)建桌面應(yīng)用程序
- Electron 官方推薦 yarn 作為軟件包管理器
- 使用 Vue 3.0 需要把 Vue Cli 升級到最新版本（編寫時為Vue Cli v4.5.11）
- Electron 11 要求 node 版本：v12.18.3
- Vue Cli 4.x 要求 node 版本：推薦 v10 以上
- 同一臺電腦中管理多個 Node 版本,可以使用 n ，nvm 或 nvm-windows
Vue Cli
// 全局安裝
yarn global add @vue/cli
// 已安裝 Vue CLI 3.x 以上的摩幔，升級全局的 Vue CLI 包
yarn global upgrade --latest @vue/cli
創(chuàng)建項目
vue create broadcast-console
選擇配置
選擇一個預(yù)設(shè)弹灭。> 指哪行就是選中該選項
Please pick a preset:
Default ([Vue 2] babel, eslint)
Default (Vue 3 Preview) ([Vue 3] babel, eslint)
> Manually select features
下一步，選擇項目所需的功能胧奔。* 是已選中
Check the features needed for your project:
(*) Choose Vue version
(*) Babel
(*) TypeScript
( ) Progressive Web App (PWA) Support
(*) Router
(*) Vuex
>(*) CSS Pre-processors
(*) Linter / Formatter
( ) Unit Testing
( ) E2E Testing
下一步，選 vue 3.x
Choose a version of Vue.js that you want to start the project with
2.x
> 3.x (Preview)
下一步预吆，選擇默認推薦的
Use class-style component syntax? No
Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX
)? Yes
Use history mode for router? (Requires proper server setup for index fallback in production) Yes
下一步龙填，選擇Sass/SCSS (with dart-sass)
Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use ar
row keys)
> Sass/SCSS (with dart-sass)
Sass/SCSS (with node-sass)
Less
Stylus
下一步，選擇 ESLint with error prevention only
Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier
TSLint (deprecated)
下一步拐叉，選擇 Lint on save岩遗，繼續(xù)下一步，步驟省略......
Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selectio
n)
>(*) Lint on save
( ) Lint and fix on commit
下面是全部選擇配置項
Vue CLI v4.5.11
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
? Use class-style component syntax? No
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No
選擇配置.png
等待項目創(chuàng)建完成凤瘦，看到運行項目操作提示宿礁，執(zhí)行后項目已經(jīng)能跑起來（此時是網(wǎng)頁端）
$ cd broadcast-console
$ yarn serve
項目結(jié)構(gòu).png
構(gòu)建 Electron 桌面應(yīng)用程序，需要安裝 Vue CLI Plugin Electron Builder
vue add electron-builder
等待安裝蔬芥，然后讓你選擇 Electron 版本梆靖，選擇 ^11.0.0
Choose Electron Version (Use arrow keys)
^9.0.0
^10.0.0
> ^11.0.0
安裝成功會提示控汉，開發(fā)環(huán)境構(gòu)建完成
......
......
......
? Running completion hooks...
? Successfully invoked generator for plugin: vue-cli-plugin-electron-builder
啟動開發(fā)服務(wù)器，應(yīng)用程序就跑起來了
yarn electron:serve
編譯應(yīng)用程序
yarn electron:build
附上項目安裝依賴文件 package.json
{
"name": "broadcast-console",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"electron:build": "vue-cli-service electron:build",
"electron:serve": "vue-cli-service electron:serve",
"postinstall": "electron-builder install-app-deps",
"postuninstall": "electron-builder install-app-deps"
},
"main": "background.js",
"dependencies": {
"core-js": "^3.6.5",
"vue": "^3.0.0",
"vue-router": "^4.0.0-0",
"vuex": "^4.0.0-0"
},
"devDependencies": {
"@types/electron-devtools-installer": "^2.2.0",
"@typescript-eslint/eslint-plugin": "^2.33.0",
"@typescript-eslint/parser": "^2.33.0",
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-plugin-typescript": "~4.5.0",
"@vue/cli-plugin-vuex": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.0",
"@vue/eslint-config-typescript": "^5.0.2",
"electron": "^11.0.0",
"electron-devtools-installer": "^3.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0-0",
"sass": "^1.26.5",
"sass-loader": "^8.0.2",
"typescript": "~3.9.3",
"vue-cli-plugin-electron-builder": "~2.0.0-rc.6"
}
}
package.json.png
