Vue.jsとElectronを連携させる方法

はじめに

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にあります。

おわりに

これで素晴らしい作業環境ができました。さらに詳しく知りたい場合は、公式ドキュメントをご覧ください 。