1. Instale o vue-cli3 (yarn é usado aqui, o pré-requisito para esta etapa é instalar o nó e o yarn)
yarn global add @vue/cli
vue --version （此命令意在查看vue的版本，可确认是否安装成功，）
2. Crie um projeto vue
vue create vue-electron-demo （vue-electron-demo是你要创建的项目名称）
3. O processo de criação de um projeto vue, seleção de módulos comuns e configuração
此时需要选择项目的一些配置，选定敲回车，出现的顺序以及基本选择如下：（**上下键，空格是选择，enter是确定**）
? Please pick a preset: (Use arrow keys)
default (babel, eslint)———————（默认安装，选择它后项目将是默认配置）
> Manually select features——————（自定义安装，选它后，后续又会出现你需要选择的一些模块）
Depois de escolher uma instalação personalizada: (os módulos comuns são selecionados aqui)
? 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） 测试）
Após selecionar, pressione 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的官网， ）
Não usamos o modo de histórico, pressione "n" e pressione 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
A configuração da ferramenta de verificação de formatação de código eslint:
? Pick a linter / formatter config: (Use arrow keys)
ESLint with error prevention only
ESLint + Airbnb config
> ESLint + Standard config——————（这里选，标准配置）
ESLint + Prettier
Quando verificar o formato:
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save——————（在保存代码的时候，检查代码格式）
( ) Lint and fix on commit
Onde colocar os arquivos de configuração do 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里）
Se deseja gravar, as opções de configuração desta vez:
? Save this as a preset for future projects? (y/N)———— (N不记录)
Após a instalação, vá para o diretório e inicie: Após
selecionar, pressione Enter para iniciar a criação do projeto. Após a conclusão da criação, siga os prompts e digite o comando para executar o projeto:
cd vue-electron-demo——————（该命令是进入项目目录下）
yarn serve——————（运行项目）
** O projeto foi executado com sucesso: ** http: // localhost: 8080, etc. aparecer, você pode abrir http: // localhost: 8080 em seu navegador. Neste ponto, o projeto Vue está concluído.
O efeito é mostrado na figura: Depois que o projeto é concluído, ele está disponível e efetivo;
注意：sassESLint
4. Depois que o projeto vue é construído, o elétron é instalado automaticamente
Na linha de comando Ctrl+c, encerre a execução do projeto para encerrar a operação em lote (S / N)? S;
Execute o comando na raiz do projeto:
vue add electron-builder——————（安装electron）
Opções de configuração, selecione a versão do Electron
? Choose Electron Version (Use arrow keys)
^4.0.0
^5.0.0
> ^6.0.0——————（这里选择electron的6.0版本）
Depois que a instalação for concluída, verifique a estrutura de diretório do projeto, ele irá gerar automaticamente background.js no diretório src e modificar package.json.
Execute o projeto:
yarn electron:serve————————（运行项目）
Após a operação ser bem sucedida, você pode ver o efeito conforme mostrado na figura: Após a
compilação ser bem sucedida, o APP do ambiente de desenvolvimento aparecerá. A próxima etapa é alterar a configuração e desenvolver.
5. Após a conclusão do desenvolvimento, empacote:
Execute o seguinte comando no diretório raiz do projeto:
yarn electron:build——————（打包的命令）
Pequena dica:
① Depois que o empacotamento for concluído, haverá uma pasta dist_electron adicional sob o projeto, e haverá um pacote de instalação do aplicativo **. Exe ** sob esta pasta, que pode ser instalado clicando duas vezes nele (você pode enviá-lo a outras pessoas para instalação), 因为这里没有进行配置，会是默认的安装路径(unidade C) e um atalho para o programa será criado na área de trabalho.
② (dist_electron \ win-unpacked) Existe uma versão verde que não precisa ser instalada, então você também pode enviar todo o win-unpacked para instalação de outras pessoas.
Conforme mostrado, clique duas vezes no .exearquivo:
irá instalar o .exeaplicativo, desta vez para ver mais do que um ícone do Desktop para o aplicativo, clique duas vezes no ícone para ver o efeito da operação acima,
aqui no GitHubupload de um Vue+Electronprojeto de compilação preliminar Para referência , este projeto será usado para fazer alguns pequenos casos de teste e continuar a atualização; https://github.com/ddx2019/vue-electron-demo地址：