I.はじめに

　　プロジェクトでは、ユーザーのために、やってB / S構造を採用し、ブラウザのURLを開いたり、不便なので、することを意図していました。

第二に、電子統合デスクトップアプリケーションの使用

　　プロジェクト自体は、彼らがパッケージ化された直接の公式デモを取るために新しく追加されたので、電子を使用する前に、プロジェクト自体がWebページを表示することができ、オープンのindex.htmlを梱包する必要があります後VUE-CLIを使用して開発されました。

　　1.クローニング公式デモ：gitのクローンhttps://github.com/electron/electron-quick-start

　　2. それにcd電子・クイック・スタート- > NPM install-> NPMスタートは、デモを実行することができるようになります

　　3.独自のプロジェクトファイルと（ディレクトリ付き）電子クイックスタートにdistのindex.htmlファイルと静的ファイルをパッケージ化操作した結果として、それを再起動します

次のコードを追加しますpackage.json 4

"パック"： "電子パッケージャの健康末端" --platform = win32の--arch = x64の--out = /アウト--asar --app-バージョン= 0.0.1。。"

プラグインのインストールパッケージ

cnpmインストール電子--save-devの//電子インストール
CNPMは、事前に電子・パッケージャこれは、プラグインのexeファイルとしてラベル付けされ、その後、使用される// --save-devの、ダウンロードをインストール

成功包装NPM実行パックを実行します

NPM実行パック

ファイル構造

5.これはリバースプロキシとしてプロジェクト自体を使用して、リクエスト内の電子ネットワークに留意すべきである、要求がパスの前にパッケージ化されているローカルパス「ファイル：E /」を増加させる、溶液。

　　コンフィグ-dev.env.js（テスト環境）とプロenv.js（フォーマルな環境）でAPI_ROOTを追加： '192.168.0.0：8080'（自分のニーズに応じて変更します）

JSファイルのエクスポートprocess.env.API_ROOTを作成します。

最後の参照main.jsで

パスプラスthis.rootを要求する前に

したがって、デスクトップアプリケーションパッケージが完了しています

以下は、インターフェイスコンフィギュレーションであります


外観browserwindowを変更するためにそれらを配置することによりmain.jsに

整数幅。 -ウィンドウ幅、デフォルトでは、単位画素である800 。

高整数 -デフォルトピクセルの窓の高さ600 。

X整数 -画面ウィンドウにオフセット位置を左。スクリーンの上部に窓オフセットの相対位置は、デフォルトuseContentSizeブールを中心- -ウェブ・ページ・サイズを使用して..幅と高さ、ウィンドウの実際のサイズは、ウィンドウ枠のサイズを含むべきであることをどの手段、わずかに大きくなり、デフォルトデフォルトY整数中心ある偽。センターは、

ブール -ウィンドウが画面のminWidth整数を中心に- 。ウィンドウの最小幅を、デフォルトは0 。

minHeightの整数 -ウィンドウの最小の高さ、デフォルトは0 。

maxWidthに整数 - ウィンドウの最大幅は、無制限のデフォルト。

のmaxHeight整数のために - ウィンドウの最大の高さは、デフォルトは無制限。

サイズ変更が可能なブール -あなたは、ウィンドウのサイズを変更することができる場合、デフォルトtrueに。

可動ブール -かどうかのウィンドウが...デフォルトでは、Linux上で無効ドラッグすることができる真に。

最小化可能ブール -ウィンドウが.. Linux上で、デフォルトでは作業をしない最小化できるかどうかをtrueに。

最大化ブール -ウィンドウがLinux上で最大化できるかどうか。デフォルトは無効です。trueに。

閉鎖可能なブール -ウィンドウはデフォルトで閉じることができるかどうか... Linux上で作業をしませんtrueに。

alwaysOnTopブール -ショーは、デフォルトでは他のウィンドウの前に、Linux上で無効常に窓か... 偽。

フルスクリーンブール -ウィンドウか明示的に設定した値ときには、フルスクリーンすることができ、偽、フルスクリーンボタンがMacOSの中で非表示になりますが、デフォルトを無効にします。偽。

fullscreenableブール - MacOSの上で、フルスクリーンボタンが利用可能であり、デフォルトは真デフォルトでタスクバーにウィンドウを表示するかどうか- 。SkipTaskbarブール。偽。

キオスクブール - 。デフォルトではキオスクモード偽タイトル文字列- 。デフォルトのウィンドウタイトルのデフォルトでは。「電子」。

アイコンNativeImage - ウィンドウアイコン、設定されていない場合は、ウィンドウの意志使用可能なデフォルトのアイコンを使用します。

ブール値を示した - 。表示窓が時にデフォルトで作成された場合はtrueに。

ブール型フレーム -指定虚偽のフレームレスウィンドウのデフォルトを作成する。trueに。

acceptFirstMouseブール -ウェブビューを許可するかどうか、デフォルトでウィンドウをアクティブにします。偽。

disableAutoHideCursorブール -デフォルトを入力するときに、マウスを非表示にするかどうか。偽。

autoHideMenuBarブール-クリックしてAltキーがない限り、またはデフォルトでメニューバー非表示にします。偽。

EnableLargerThanScreenブールを許可するデフォルトのウィンドウサイズの画面よりも大きな変更を許可- 。偽。

BackgroundColorを文字列など＃66CD00や#FFFなど色の背景ウィンドウの16進数の値を、 -または＃80FFFFFF＃にLinuxとWindowsのデフォルトではオン（サポート透明）000 （黒）は、Macが#FFF（または透明）である。

hasShadowブール -ウィンドウが影を持っているかどうか...のみMacOSをデフォルトで有効であるtrueに。

darkThemeブール - GTK +でのみいくつかの国では、窓の暗いテーマを使用3デフォルトでは効果的なデスクトップ環境。偽。

透明ブール -デフォルトで透明窓は。偽。

String型 - ..ウィンドウタイプを、より多くのtitleBarStyleを表示するには、以下の通常のウィンドウをデフォルト文字列- 。スタイルウィンドウのタイトルバーの下の詳細を確認します。

オブジェクトWebPreferences -セット界面特性は、下記より確認してください。

フォーム電子メニューバーを非表示にする方法

電子トップメニューバーで、デフォルト、時には私たちは、アプリケーションを必要としません。

そして、main.jsファイルの設定

CONST電子=必要とする（ '電子'）

CONSTパス=は（ 'パス'）を必要と
CONST URL =必要とする（ 'URL'）

させメイン・ウィンドウ
CONSTメニュー= electron.Menuの
関数のcreateWindow（）{ 
　//隐藏菜单栏

  Menu.setApplicationMenu（ヌル）
  //ブラウザのウィンドウを作成します设置窗口宽高、最小宽高、图标等。
  メインウィンドウ=新しいBrowserWindow（{幅：800、高さ：600、のminWidth：1280、minHeightプロパティ：800、サイズ変更可能：偽、 allowRunningInsecureContent：真、experimentalCanvasFeatures：真、アイコン」./favicon.ico '}）
  mainWindow.loadURL（ "http://www.nlfit.cn/saas/index.html#/login"）
 
  mainWindow.on（'閉」、関数（）{ 
    メインウィンドウ= NULL 
  }）
}

CONST電子=（ '電子'）を必要とします

//そうでない場合は、ウィンドウは意志、ウィンドウオブジェクトのグローバル参照してください

JavaScriptオブジェクトがガベージコレクトされるとき//が自動的に閉じられ。

// constのアプリ= electron.app

// constのBrowserWindow = electron.BrowserWindow

CONSTパス=必要とする（ 'パス'）

constのURL =必要（ 'URL'）

メインウィンドウを聞かせて

constのメニュー= electron.Menu

関数のcreateWindow（）{

Menu.setApplicationMenu（ヌル）

//ブラウザのウィンドウを作成します。

メインウィンドウ=新しいBrowserWindow（{幅：800、高さ：600、のminWidth：1280、minHeightプロパティ：800、サイズ変更可能：偽、allowRunningInsecureContent：真、experimentalCanvasFeatures：真、アイコン './favicon.ico'}）

//アプリのindex.htmlをロードします。

mainWindow.loadURL（ "http://www.nlfit.cn/saas/index.html#/login"）

//は、デベロッパーツールを開きます。

// mainWindow.webContents.openDevTools（）

//ウィンドウが閉じられたときに発行されます。

mainWindow.on（ '閉鎖'、関数（）{

//間接参照ウィンドウオブジェクト、通常はWindowsを格納します

//あなたのアプリがマルチウィンドウをサポートしている場合、配列には、これは時間であります

//あなたが対応する要素を削除する必要があるとき。

メインウィンドウ= nullを

}）

}