1. vue-cli3をインストールします（ここではyarnが使用されます。このステップの前提条件は、ノードとyarnをインストールすることです）
yarn global add @vue/cli
vue --version （此命令意在查看vue的版本，可确认是否安装成功，）
2.vueプロジェクトを作成します
vue create vue-electron-demo （vue-electron-demo是你要创建的项目名称）
3. vueプロジェクトを作成し、共通のモジュールと構成を選択するプロセス
此时需要选择项目的一些配置，选定敲回车，出现的顺序以及基本选择如下：（**上下键，空格是选择，enter是确定**）
? Please pick a preset: (Use arrow keys)
default (babel, eslint)———————（默认安装，选择它后项目将是默认配置）
> Manually select features——————（自定义安装，选它后，后续又会出现你需要选择的一些模块）
カスタムインストールを選択した後:(共通モジュールがここで選択されます）
? 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） 测试）
選択した後、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」を押して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
eslintコードフォーマットチェックツールの構成：
? Pick a linter / formatter config: (Use arrow keys)
ESLint with error prevention only
ESLint + Airbnb config
> ESLint + Standard config——————（这里选，标准配置）
ESLint + Prettier
フォーマットを確認するタイミング：
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save——————（在保存代码的时候，检查代码格式）
( ) Lint and fix on commit
babel、eslintなどの構成ファイルを配置する場所：
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
> In dedicated config files （这里选了放在各自专用的配置文件中）
In package.json——————（放在package.json里）
記録するかどうか、今回は構成オプション：
? Save this as a preset for future projects? (y/N)———— (N不记录)
インストール後、ディレクトリに移動して開始します。
選択後、Enterキーを押してプロジェクトの作成を開始します。作成が完了したら、プロンプトに従い、コマンドを入力してプロジェクトを実行します。
cd vue-electron-demo——————（该命令是进入项目目录下）
yarn serve——————（运行项目）
**プロジェクトは正常に実行されます：** http：// localhost：8080などが表示されたら、ブラウザでhttp：// localhost：8080を開くことができます。この時点で、Vueプロジェクトは完了です。
効果を図に示します。プロジェクトが完了すると、それは利用可能で効果的です。
注意：sassESLint
4. vueプロジェクトが構築された後、電子は自動的にインストールされます
コマンドラインCtrl+cで、プロジェクトの実行を終了してバッチ操作を終了します（Y / N）？Y;
プロジェクトのルートでコマンドを実行します。
vue add electron-builder——————（安装electron）
構成オプション、Electronのバージョンを選択します
? Choose Electron Version (Use arrow keys)
^4.0.0
^5.0.0
> ^6.0.0——————（这里选择electron的6.0版本）
インストールが完了したら、プロジェクトのディレクトリ構造を確認します。srcディレクトリにbackground.jsが自動的に生成され、package.jsonが変更されます。
プロジェクトを実行します。
yarn electron:serve————————（运行项目）
操作が成功すると、図に示すような効果が見られます。
コンパイルが成功すると、開発環境のAPPが表示されます。次のステップは、構成を変更して開発することです。
5.開発が完了したら、次のパッケージを作成します。
プロジェクトのルートディレクトリで次のコマンドを実行します。
yarn electron:build——————（打包的命令）
ヒント：
①パッケージ化が完了すると、プロジェクトの下に追加のdist_electronフォルダーがあり、このフォルダーの下に**。exe **アプリケーションインストールパッケージがあります。これは、ダブルクリックしてインストールできます（あなたインストールのために他の人に送信できます）、因为这里没有进行配置，会是默认的安装路径（Cドライブ）、プログラムへのショートカットがデスクトップに作成されます。
②（dist_electron \ win-unpacked）インストールする必要のないグリーンバージョンがあるので、win-unpacked全体を他の人に送ってインストールすることもできます。
示されているように、.exeファイルをダブルクリックします。アプリケーション
をインストールし.exeます。今回は、アプリケーションのデスクトップアイコン以外のものを表示します。アイコンをダブルクリックして、上記の操作の効果を確認します。
ここではGitHub、予備ビルドVue+Electronプロジェクトをアップロードします。 、このプロジェクトは、いくつかの小さなテストケースを実行し、更新を継続するために使用されます; https://github.com/ddx2019/vue-electron-demo地址：