1. Install vue-cli3 (yarn is used here, the prerequisite for this step is to install node and yarn)
yarn global add @vue/cli
vue --version （此命令意在查看vue的版本，可确认是否安装成功，）
2. Create a vue project
vue create vue-electron-demo （vue-electron-demo是你要创建的项目名称）
3. The process of creating a vue project, selecting common modules and configuration
此时需要选择项目的一些配置，选定敲回车，出现的顺序以及基本选择如下：（**上下键，空格是选择，enter是确定**）
? Please pick a preset: (Use arrow keys)
default (babel, eslint)———————（默认安装，选择它后项目将是默认配置）
> Manually select features——————（自定义安装，选它后，后续又会出现你需要选择的一些模块）
After choosing a custom installation: (Common modules are selected here)
? Check the features needed for your project:
(*) Babel——————（转码器，将ES6代码转为ES5代码，从而在现有环境执行。 ）
( ) TypeScript——————（是JS（后缀.js）的超集，后缀为.ts,包含并扩展了 JavaScript 的语法,现很少人用）
( ) Progressive Web App (PWA) Support————（渐进式Web应用程序）
(*) Router——————（vue-router 即vue路由）
(*) Vuex——————（vuex ,vue的状态管理模式）
(*) CSS Pre-processors——————（ CSS 预处理器（如：less、sass））
(*) Linter / Formatter——————（代码风格检查和格式化（如：ESlint））
>( ) Unit Testing——————（单元测试）
( ) E2E Testing————————（/e2e（end to end） 测试）
After selecting, hit enter:
? Use history mode for router? (Requires proper server setup for index fallback in production)
(Y/n)———————— n （是否采用history模式，这里对vue-router，vue-router 默认使用hash模式，可参考vue-router的官网， ）
We do not use the history mode, hit "n" and press Enter:
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
Sass/SCSS (with dart-sass)
> Sass/SCSS (with node-sass)————（这里选css预处理，一般项目用scss,这里选了第二个）
Less
Stylus
The configuration of the eslint code formatting check tool:
? Pick a linter / formatter config: (Use arrow keys)
ESLint with error prevention only
ESLint + Airbnb config
> ESLint + Standard config——————（这里选，标准配置）
ESLint + Prettier
When to check the format:
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save——————（在保存代码的时候，检查代码格式）
( ) Lint and fix on commit
Where to put the configuration files of babel, eslint, etc.:
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
> In dedicated config files （这里选了放在各自专用的配置文件中）
In package.json——————（放在package.json里）
Whether to record, this time configuration options:
? Save this as a preset for future projects? (y/N)———— (N不记录)
After installation, move to the directory and start: After
selecting, press Enter to start creating the project. After the creation is complete, follow the prompts and enter the command to run the project:
cd vue-electron-demo——————（该命令是进入项目目录下）
yarn serve——————（运行项目）
**The project runs successfully:** http://localhost:8080, etc. appears, you can open http://localhost:8080 in your browser. At this point, the Vue project is completed.
The effect is shown in the figure: After the project is completed, it is available and effective;
注意：sassESLint
4. After the vue project is built, electron is automatically installed
On the command line Ctrl+c, end the project run to terminate the batch operation (Y/N)? Y;
Run the command at the root of the project:
vue add electron-builder——————（安装electron）
Configuration options, select the version of Electron
? Choose Electron Version (Use arrow keys)
^4.0.0
^5.0.0
> ^6.0.0——————（这里选择electron的6.0版本）
After the installation is complete, check the directory structure of the project, it will automatically generate background.js in the src directory and modify package.json.
Run the project:
yarn electron:serve————————（运行项目）
After the operation is successful, you can see the effect as shown in the figure: After the
compilation is successful, the APP of the development environment will appear. The next step is to change the configuration and develop.
5. After the development is completed, package:
Run the following command in the project root directory:
yarn electron:build——————（打包的命令）
Small tip:
① After the packaging is completed, there will be an additional dist_electron folder under the project, and there will be a **.exe** application installation package under this folder, which can be installed by double-clicking it (you can send it to others for installation), 因为这里没有进行配置，会是默认的安装路径( C drive), and a shortcut to the program will be created on the desktop.
② (dist_electron\win-unpacked) There is a green version that does not need to be installed, so you can also send the whole win-unpacked to others for installation.
As shown, double-click the .exefile:
will install the .exeapplication, this time to see more than a Desktop icon for the application, double-click the icon to see the effect of the above operation,
here in GitHubuploading a preliminary build Vue+Electronprojects For reference, this project will be used to do some small test cases and continue to update; https://github.com/ddx2019/vue-electron-demo地址：