假设你已有一定的基础，已安装好 Yarn、Node
基础部分可参考这篇 Electron 5.x + Vue Cli 3.x + Vue 2.x + Vue CLI Plugin Electron Builder 构建桌面应用程序
- 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
创建项目
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 to select, to toggle all, 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