はじめに
Vue.jsとElectronの人気（人気があることを望みます）をきっかけに、合理的な疑問が生じますが、それらをどのように連携させるか。 この短いチュートリアルでは、ElectronおよびVue.jsでアプリケーションを開発するためのテンプレートをすばやくインストールして構成する方法を示します。 それでは始めましょう。
何が必要ですか
- yarnはnpmに似たパッケージマネージャーです。 糸を選んだのは、このツールが好きだからですが、npmも使用できます。 ここに糸をインストールする方法、ここにnpm。
- vue-cli -webpackのサポートを追加して、Vue.jsでプロジェクトをすばやく初期化できるコンソールユーティリティ。
- electron-vueは、使用するテンプレートです。
設置
ターミナルを起動し、コマンドを入力してvue-cliをインストールします。
yarn global add vue-cli
同様にnpmの場合：
npm install vue-cli -g
次に、プロジェクトを作成します。
vue init simulatedgreg/electron-vue <_>
<_>代わりに、作業用にすべてのファイルを配置するフォルダーに名前を付けます。
インストール中に、次の質問が表示されます。
- ？ アプリケーション名 ：プロジェクト名。
- ？ プロジェクトの説明 ： プロジェクトの説明 。
- ？ インストールするVueプラグインの選択 ： インストールするプラグインを選択します。
- ？ ESLintでリントを使用する： ESLint （JSのスタイルガイドをチェックするリンターまたはゲーム）を使用します。
- ？ Karma + Mochaを使用した単体テストのセットアップ ： KarmaおよびMochaテストをインストールします。
- ？ Spectron + Mochaを使用してエンドツーエンドのテストをセットアップします。エンドツーエンドのテスト用にSpectronとMochaをインストールします。
- ？ どのビルドツールを使用しますか。どのコレクターにエレクトロンビルダーまたはエレクトロンパッケージャーが必要ですか。 それに問題が少ないので、電子ビルダーをお勧めします。
- ？ 著者 ：あなたの名前。
質問に答えた後、ディレクトリに移動し、必要なパッケージをインストールします。
cd <_> yarn
npmの場合：
cd <_> npm install
インストールされているすべての機能を確認するには、アプリケーションを実行します。
yarn dev
または：
npm run dev
そして、以下が表示されるはずです。
それから何？
次に、作業ディレクトリにあるメインフォルダーを分析します。
- .electron-vue ： webpackのすべての構成。
- ビルド ：プロジェクトをビルドすると、ビルド後に判明したすべてのファイル（インストーラー、アンパックバージョン）が表示されます。 また、異なるオペレーティングシステムのアプリケーションアイコンを配置する必要があるアイコンフォルダーもあります。
- dist ：開発モードでは、アプリケーションはこのフォルダーから起動されるため、それに触れることは意味がありません。
- src ：アプリケーションのソースコードのすべて：
- main ：Electronのメインプロセスを操作するためのファイル。
- 資産 ：写真およびその他のメディア。
- components ：すべてのVueコンポーネントの保管場所。
- router ： vue-routerのファイル。
- ストア ： vuexのファイル。
組立
アプリケーションをビルドするには、次を入力します。
yarn build
または：
npm run build
結果はビルドフォルダーに表示されます。 electron-builderの設定は、buildセクションのpackage.jsonにあります。
おわりに
これで素晴らしい作業環境ができました。さらに詳しく知りたい場合は、公式ドキュメントをご覧ください 。