* [日本語](ja/)

[](https://semaphoreci.com/simulatedgreg/electron-vue)

[](https://github.com/feross/standard)

[](http://forthebadge.com) [](http://forthebadge.com) [](http://forthebadge.com)

このプロジェクトは vue を使用した electron アプリケーションの手動セットアップをなくすことを目標としています。electron-vue はスキャフォールディングのために `vue-cli` 、 `vue-loader` と `webpack`、 `electron-packager` または `electron-builder`、 `vue-router` や `vuex` などの最も使われているプラグインを使用します。

このボイラープレートで見つけることができるもの...

- **単一の** `package.json` セットアップによる基本的なプロジェクト構造

- 詳細な[ドキュメント](https://simulatedgreg.gitbooks.io/electron-vue/content/)

- [vue-cli](https://github.com/vuejs/vue-cli) を使用したプロジェクトスキャフォールディング

- Vue プラグイン ([axios](https://github.com/mzabriskie/axios), [vue-electron](https://github.com/SimulatedGREG/vue-electron), [vue-router](https://github.com/vuejs/vue-router), [vuex](https://github.com/vuejs/vuex))を使用する準備ができています*

- 開発のために [vue-devtools](https://github.com/vuejs/vue-devtools) や [devtron](https://github.com/electron/devtron) ツールのインストール

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

- [electron-builder](https://github.com/electron-userland/electron-builder) による自動デプロイのための `appveyor.yml` と `.travis.yml` の設定*

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

- 便利な [NPM scripts](/npm_scripts.md)

- Hot Module Replacement を伴う [webpack](https://github.com/webpack/webpack) と [vue-loader](https://github.com/vuejs/vue-loader) の使用

- electron の `main` プロセスで動いているプロセスの再起動

- [vue-loader](https://github.com/vuejs/vue-loader/) による HTML/CSS/JS プリプロセッサのサポート

- ES6 のデフォルトは [`stage-0`](https://babeljs.io/docs/plugins/preset-stage-0/) です

- ES5 へトランスパイルする必要をなくすために [`babili`](https://github.com/babel/babili) の使用

- ESLint ([`standard`](https://github.com/feross/standard) と [`airbnb-base`](https://github.com/airbnb/javascript) スタイルのサポート)*

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

- (Spectron と Mocha を使用した)エンドツーエンドテスト*

*の箇所は `vue-cli` のスキャフォールディング中にカスタマイズ可能です

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

npm install -g vue-cli

vue init simulatedgreg/electron-vue my-project

cd my-project

yarn # or npm install

yarn run dev # or npm run dev

[**Windows ユーザーのための注意**](https://simulatedgreg.gitbooks.io/electron-vue/content/ja/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))。

vue init simulatedgreg/electron-vue#1.0 my-project

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

electron-vue で作られたいくつかの素晴らしいプロジェクトを見てみましょう。自身のプロジェクトをリストに追加したいですか？遠慮なくプルリクエストを送ってください。

- [**Surfbird**](https://github.com/surfbirdapp/surfbird): Electron と Vue で作られた Twitter クライアント

- [**Lulumi-browser**](https://github.com/qazbnm456/lulumi-browser): Lulumi-browser は Vue.js 2 と Electron でコーディングされた軽量なブラウザです。

- [**Space-Snake**](https://github.com/ilyagru/Space-Snake): Electron と Vue.js で作られたデスクトップゲーム。

- [**Forrest**](https://github.com/stefanjudis/forrest): npm scripts デスクトップクライアント

- [**miikun**](https://github.com/hiro0218/miikun): シンプルなマークダウンエディター

- [**Dakika**](https://github.com/Madawar/Dakika): 議事録を簡単に取ることができるアプリケーション

- [**Dynamoc**](https://github.com/ieiayaobb/dynamoc): Dynamoc は dynamodb-local、 dynalite と AWS dynamodb のための GUI クライアントです

- [**Dockeron**](https://github.com/dockeron/dockeron): Docker のために Electron と Vue.js で作られた dockeron プロジェクト

- [**Easysubs**](https://github.com/matiastucci/easysubs): 字幕を早く簡単な方法でダウンロードする

- [導入](./README.md)

- [はじめに](getting_started.md)

- [プロジェクト構造](project_structure.md)

- [ファイルツリー](file-tree.md)

- [レンダラープロセス](renderer-process.md)

- [メインプロセス](main-process.md)

- [Webpack 構成](webpack-configurations.md)

- [開発](development.md)

- [index.html](entry_indexhtml.md)

- [Vue プラグイン](vue_accessories.md)

- [NPM スクリプト](npm_scripts.md)

- [CSS フレームワークの使用](using_css_frameworks.md)

- [プリプロセッサの使用](using_pre-processors.md)

- [静的アセットの使用](using-static-assets.md)

- [ローカルファイルの読み書き](savingreading-local-files.md)

- [アプリケーション構築](building_your_app.md)

- [electron-packager の使用](using-electron-packager.md)

- [electron-builder の使用](using-electron-builder.md)

- [テスト](testing.md)

- [ユニットテスト](unittesting.md)

- [エンドツーエンドテスト](end-to-end_testing.md)

- [メタ](meta.md)

- [FAQ](faqs.md)

- [新しいリリース](new-releases.md)

- [マイグレーションガイド](migration-guide.md)

- [貢献](contributing.md)

{

"root": ""

}

electron-vue はビルドと本番アプリケーションの配布のために [electron-packager](https://github.com/electron-userland/electron-packager) と [electron-builder](https://github.com/electron-userland/electron-builder) の両方をサポートしています。両方のビルドツールは素晴らしい [@electron-userland](https://github.com/electron-userland) コミュニティによって支援されていて、それぞれに詳細なドキュメントがあります。`vue-cli` のスキャフォールディング中にどちらのビルダーを使いたいか尋ねられます。

electron アプリケーションを作成するのが初めて使う人や単純な実行可能ファイルを作成する必要がある場合、`electron-packager` がニーズに最適です。

完全なインストーラー、自動更新サポート、Travis CI と AppVeyor を使用した CI ビルド、またはネイティブコードモジュールの再構築の自動化を探し求めている場合、`electron-builder` が最適です。

このボイラープレートを手助けしたいですか？遠慮なくプルリクエストを送信してください。何かを送信する準備をする前に、以下をチェックしてください...

全ての JS が***標準スタイル***に従っていることを確実にするために、これらの[ルール](http://standardjs.com/#rules)に従っていることを確認してください。

[](https://github.com/feross/standard)

`yarn` または `npm install` で依存関係をインストールした後、実行します...

yarn run dev # or npm run dev

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

このボイラープレートには、簡単に取り外し可能なランディングページがいくつか付属しています。

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

npm run e2e

エンドツーエンドテストを実行する前に、Spectron がテスト中に使用する本番ビルドを作成するために、`npm run pack` が呼び出されます。

**ほとんどの場合、 **`index.js`** は無視して、 **`specs/`** を書くことだけに集中できます。**

このディレクトリの中に実際のテストが書かれています。`babel-register` の機能のおかげで、ES2015にフルアクセスできます。

このファイルは Mocha のメインエントリーとして機能し、テスト用に `specs/` で書かれた全てのテストを集めます。

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

Spectron は 公式の [electron](http://electron.atom.io) テストフレームワークであり、DOM 要素を操作するために [ChromeDriver](https://sites.google.com/a/chromium.org/chromedriver/) と [WebDriverIO](http://webdriver.io/) の両方を使用します。

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 ファイルを変更することができます。

このプラグインがどのように動作するかわからない場合は、その[ドキュメント](https://www.npmjs.com/package/html-webpack-plugin)を見ることを勧めます。しかし要するに、このプラグインは自動的に `renderer.js` と `styles.css` を含む本番アセットを最終的にファイルサイズを小さくし、 `index.html` に挿入します。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title><%= htmlWebpackPlugin.options.title %></title>

<%= ... %>

</head>

<body>

<div id="app"></div>

<!-- webpack ビルドが自動的に注入されます -->

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>app</title>

<link href="styles.css" rel="stylesheet">

</head>

<body>

<div id="app"></div>

<script type="text/javascript" src="renderer.js"></script>

</body>

</html>

CDN から提供されるアセットを利用することは、アプリケーションの最終的なビルドサイズにとっては素晴らしい利点があるかもしれませんが、それらを使用することは勧めません。主な理由は、そうすることによってアプリケーションが必ずインターネットにアクセスできると仮定することになりますが、Electron アプリケーションの場合は必ずしもそうとは限りません。これは bootstrap のような CSS フレームワークではかなり重大な問題となり、アプリケーションはすぐに整っていない状態になるでしょう。

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

- [`npm run dev` を実行した後に electron アプリケーションが空白になるのはなぜですか？](#why-is-my-electron-app-blank-after-running-npm-run-dev)

- [electron アプリケーションがファイルエクスプローラーを表示するのはなぜですか？](#why-does-my-electron-app-show-a-file-explorer)

- [`vue-devtools`/`devtron` が見つからないと言われるのはなぜですか？](#why-is-vue-devtoolsdevtron-missing)

- [静的なアセットはどこに置けば良いですか？](#where-do-i-put-static-assets)

- [`npm run lint` がエラーで終了するのはなぜですか？](#why-did-npm-run-lint-end-with-an-error)

- [アプリケーションが web ブラウザで読み込めないのはなぜですか？](#why-cant-i-load-my-app-in-a-web-browser)

- [`jquery` はどうやってインポートするのですか？](#how-do-import-jquery)

- [`main` プロセスはどうやってデバッグするのですか？](#how-can-i-debug-the-main-process)

`webpack-dev-server` を改ざんする個人用の**プロキシ**がないことを確認してください。

`src/renderer` にエラーがあります。コンソールを確認し、エラーを修正し、`CommandOrControl+R` で electron を更新してください。

`src/renderer` にエラーがある場合、最初の実行時に ESLint と競合が発生します。次に、無効な webpack の `renderer.js` が作成され、`HtmlWebpackPlugin` が `index.html` を作成するのを中断します。`webpack-dev-server` は提供可能な `index.html` がないので、サーバーはファイルエクスプローラーを表示します。

初めて起動するときに、開発者ツールのパネルがないときは閉じて再度開いてください。また、インストール中にエラーメッセージが発生していないか、ターミナルを確認してください。

[**静的なアセットの使用**](/using-static-assets.md)

ESLint のデフォルトの性質は、リントエラーをコンソールに表示することです。もし何か見つかった場合は、スクリプトは0でない値を返し終了します(これが npm エラーを作成します)。これは正常な動作です。

`bootstrap` を使いたい場合、あなたを止めなければなりません。`vue` と `jquery` の両方を同じ環境で使用することはバッドプラクティスであり、2つのフレームワークが互いに衝突することにつながります。`vue` を JavaScript 関数的に使用する `bootstrap` の代替を使用することを強くお勧めします。お勧めは、[`bootstrap-vue`](https://github.com/bootstrap-vue/bootstrap-vue) と [`vue-strap`](https://github.com/yuche/vue-strap) です。何らかの理由で `jquery` を使用しなければならない場合、`webpack`の `ProvidePlugin` に関するドキュメントを詳しく調べるか [#192](https://github.com/SimulatedGREG/electron-vue/issues/192) を参照してください。

`electron@^1.7.2` 以上を使用している場合、Google Chrome を開き、`chrome://inspect` にアクセスし、アプリケーションが開発モードで起動している間に、リモート electron プロセスを開くことができます。

[Electron のドキュメント](https://github.com/electron/electron/blob/master/docs/tutorial/debugging-main-process.md)