- [electron-packager](https://github.com/electron-userland/electron-packager) や [electron-builder](https://github.com/electron-userland/electron-builder)を使用して簡単にアプリケーションをパッケージングする機能*

- ブラウザ用のWeb出力を生成する機能

- (Karma + Mocha を使用した)ユニットテスト*

- (Spectron + Mocha を使用した) End-to-end テスト*

このボイラープレートは [`vue-cli`](https://github.com/vuejs/vue-cli) のテンプレートとして作成され、スキャフォールディングされたアプリケーションをカスタマイズするためのオプションが含まれています。 `node@^7` かそれ以上のバージョンを使用する必要があります。 electron-vue はパッケージマネージャの [`yarn`](https://yarnpkg.org) を公式に推奨しています。 依存関係をよりよく処理し、 `yarn clean` により最終的なビルドサイズを減らすことができます。

[**Windows ユーザーのための注意**](https://simulatedgreg.gitbooks.io/electron-vue/content/en/getting_started.html#a-note-for-windows-users)を確認し、 electron や他の依存関係で必要なビルドツールが全てあることを確認してください。

`1.0` ブランチを参照してください。 electron-vue は `vue@^1` の使用を公式に推奨していないため、プロジェクトの構造、機能やドキュメントは これらの変更を反映していることに注意してください([**旧版のドキュメント**](https://github.com/SimulatedGREG/electron-vue/tree/1.0/docs))。

[ドキュメント](https://simulatedgreg.gitbooks.io/electron-vue/content/) を確認してください。こちらから設定、プロジェクト構造、アプリケーションのビルドに関する有益な情報を得ることができます。便利な [FAQs](https://simulatedgreg.gitbooks.io/electron-vue/content/en/faqs.html) セクションもあります。

...そしてやりました！electron-vue アプリケーションの実行に成功しました。<br>

electron-vue はエンドツーエンドテストのために [Spectron](http://electron.atom.io/spectron/) とテストフレームワークの [Mocha](https://mochajs.org/) ([Chai](http://chaijs.com/) と一緒に) を利用しています。test framework for end-to-end testing. Mocha と Chai の APIは、`expect`、`should`、`assert`を含め、グローバルスコープで利用可能です。

ここでは、 `specs/` 全体で使用することができる汎用関数を見つけることができます。基本関数には、 electron の作成/破壊プロセスを処理する `beforeEach` と `afterEach` が含まれます。

Spectron の[ドキュメント](https://github.com/electron/spectron#client)に記載されている通り、[WebDriverIO API](http://webdriver.io/api.html) へのアクセスは `this.app.client` を通してすることができます。 electron-vue は Mocha を使用しているため、`this` のコンテキストは `afterEach`、`beforeEach`、`it` の間で共有されます。このため、 ES2015 のアロー関数は、`this` のコンテキストが上書きされるため、特定の状況では使用できないことに注意することが重要です([詳細](https://mochajs.org/#arrow-functions))。

electron-vue は本番ビルドで `index.html` を作成するために [**`html-webpack-plugin`**](https://github.com/ampedandwired/html-webpack-plugin) を使用します。開発中は `src/` ディレクトリの`index.ejs` があります。ここではエントリーとなる HTML ファイルを変更することができます。

<!-- webpack builds are automatically injected -->

それでも CDN を利用すると決めた場合は、 `src/index.ejs` ファイルにタグを追加することでできます。ただアプリケーションがオフラインの時に UI/UX フローを適切に設定してください。

このボイラープレートは [vue-cli](https://github.com/vuejs/vue-cli) のテンプレートとして作成され、スキャフォールディングされたアプリケーションをカスタマイズするためのオプションが含まれています。 `node@^7` かそれ以上のバージョンを使用する必要があります。 electron-vue はパッケージマネージャの [`yarn`](https://yarnpkg.org) を公式に推奨しています。 依存関係をよりよく処理し、 `yarn clean` により最終的なビルドサイズを減らすことができます。

オプションとはいっても、プロジェクトをスキャフォールディングした後は electron のバージョンを固定することをお勧めします。これは、同じプロジェクトで作業している開発者が異なるバージョンで開発することを防ぐことに役立ちます。 electron はリリースを頻繁に行うため、機能は常に変更対象です。 [詳細な情報](http://electron.atom.io/docs/tutorial/electron-versioning/)。

`npm install` 中に `node-gyp` に関するエラーが発生した場合、システムに適切なビルドツールがインストールされていない可能性が非常に高いです。ビルドツールには、PythonやVisual Studioなどの項目が含まれています。[@felixrieseberg](https://github.com/felixrieseberg) のおかげで、このプロセスを簡潔にするのに役立つパッケージがいくつかあります。

この時点では正常にインストールされるはずですが、そうでない場合は Visual Studio をクリーンインストールする必要があります。これらは electron-vue 自身の問題ではないことに注意してください (Windows は時々面倒になることがあります ¯\_(ツ)_/¯)。

このファイルはアプリケーションのメインファイルであり、 `electron` が起動するファイルです。本番向けの`webpack`のエントリーファイルとしても使われます。すべての `main` プロセスの作業はここから開始しなければなりません。

`main` プロセスは `webpack` を使用してバンドルされているため、 `__dirname` と `__filename` を使用しても本番環境で期待した値は得られ **ないでしょう**。[**ファイルツリー**](/file-tree.md) を参照すると、本番環境では `main.js` が `dist/electron` フォルダの中に置かれていることがわかるでしょう。この知識に基づいて、 `__dirname` と `__filename` を適切に使用してください。