1. Instale vue-cli3 (aquí se usa hilo, el requisito previo para este paso es instalar el nodo y el hilo)
yarn global add @vue/cli
vue --version （此命令意在查看vue的版本，可确认是否安装成功，）
2. Crea un proyecto vue
vue create vue-electron-demo （vue-electron-demo是你要创建的项目名称）
3. El proceso de creación de un proyecto vue, selección de módulos comunes y configuración.
此时需要选择项目的一些配置，选定敲回车，出现的顺序以及基本选择如下：（**上下键，空格是选择，enter是确定**）
? Please pick a preset: (Use arrow keys)
default (babel, eslint)———————（默认安装，选择它后项目将是默认配置）
> Manually select features——————（自定义安装，选它后，后续又会出现你需要选择的一些模块）
Después de elegir una instalación personalizada: (Aquí se seleccionan los módulos comunes)
? 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） 测试）
Después de seleccionar, presione 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的官网， ）
No usamos el modo historial, presionamos "n" y presionamos 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
La configuración de la herramienta de verificación de formato 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
Cuándo verificar el 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
Dónde poner los archivos de configuración de 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里）
Ya sea para grabar, esta vez las opciones de configuración:
? Save this as a preset for future projects? (y/N)———— (N不记录)
Después de la instalación, muévase al directorio y comience: Después de
seleccionar, presione Enter para comenzar a crear el proyecto. Una vez completada la creación, siga las instrucciones e ingrese el comando para ejecutar el proyecto:
cd vue-electron-demo——————（该命令是进入项目目录下）
yarn serve——————（运行项目）
** El proyecto se ejecuta correctamente: ** Aparece http: // localhost: 8080, etc., puede abrir http: // localhost: 8080 en su navegador. En este punto, se completa el proyecto Vue.
El efecto se muestra en la figura: Una vez completado el proyecto, está disponible y es efectivo;
注意：sassESLint
4. Una vez creado el proyecto vue, electron se instala automáticamente
En la línea de comando Ctrl+c, ¿finalizar la ejecución del proyecto para terminar la operación por lotes (Y / N)? Y;
Ejecute el comando en la raíz del proyecto:
vue add electron-builder——————（安装electron）
Opciones de configuración, seleccione la versión de Electron
? Choose Electron Version (Use arrow keys)
^4.0.0
^5.0.0
> ^6.0.0——————（这里选择electron的6.0版本）
Una vez completada la instalación, verifique la estructura de directorios del proyecto, automáticamente generará background.js en el directorio src y modificará package.json.
Ejecuta el proyecto:
yarn electron:serve————————（运行项目）
Después de que la operación sea exitosa, puede ver el efecto como se muestra en la figura: Después de que la
compilación sea exitosa, aparecerá la APLICACIÓN del entorno de desarrollo. El siguiente paso es cambiar la configuración y desarrollar.
5. Una vez completado el desarrollo, empaque:
Ejecute el siguiente comando en el directorio raíz del proyecto:
yarn electron:build——————（打包的命令）
Pequeño consejo:
① Una vez completado el paquete, habrá una carpeta dist_electron adicional debajo del proyecto, y habrá un paquete de instalación de la aplicación **. Exe ** debajo de esta carpeta, que se puede instalar haciendo doble clic en él (usted puede enviarlo a otros para que lo instalen), 因为这里没有进行配置，会是默认的安装路径(unidad C) y se creará un acceso directo al programa en el escritorio.
② (dist_electron \ win-unpacked) Hay una versión verde que no necesita ser instalada, por lo que también puede enviar todo el paquete win-unpacked a otros para que lo instalen.
Como se muestra, haga doble clic en el .exearchivo:
instalará la .exeaplicación, esta vez para ver más que un icono de escritorio para la aplicación, haga doble clic en el icono para ver el efecto de la operación anterior,
aquí en la GitHubcarga de Vue+Electronproyectos de construcción preliminares Para referencia , este proyecto se utilizará para hacer algunos casos de prueba pequeños y continuar actualizándose; https://github.com/ddx2019/vue-electron-demo地址：