Electron + Vue 3.x + Vue Cli 4.x

假设你已有一定的基础，已安装好 Yarn、Node

基础部分可参考这篇 Electron 5.x + Vue Cli 3.x + Vue 2.x + Vue CLI Plugin Electron Builder 构建桌面应用程序

1. Electron 官方推荐 yarn 作为软件包管理器
2. 使用 Vue 3.0 需要把 Vue Cli 升级到最新版本（编写时为Vue Cli v4.5.11）
3. Electron 11 要求 node 版本：v12.18.3
4. Vue Cli 4.x 要求 node 版本：推荐 v10 以上
5. 同一台电脑中管理多个 Node 版本,可以使用 n ，nvm 或 nvm-windows

Vue Cli

// 全局安装
yarn global add @vue/cli

// 已安装 Vue CLI 3.x 以上的，升级全局的 Vue CLI 包
yarn global upgrade --latest @vue/cli

创建项目

vue create broadcast-console

选择配置

选择一个预设。> 指哪行就是选中该选项

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，继续下一步，步骤省略......

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

等待项目创建完成，看到运行项目操作提示，执行后项目已经能跑起来（此时是网页端）

 $ cd broadcast-console
 $ yarn serve

项目结构.png

构建 Electron 桌面应用程序，需要安装 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

安装成功会提示，开发环境构建完成

......
......
......

⚓  Running completion hooks...

✔  Successfully invoked generator for plugin: vue-cli-plugin-electron-builder

启动开发服务器，应用程序就跑起来了

yarn electron:serve

编译应用程序

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