Electron-vite +Vue+ElementPlus を使用してクロスプラットフォーム デスクトップ アプリケーションを開発する

序文:

私たちのプロジェクトは、データ ストレージとクエリに Elasticsearch をベースにしています。ES を使用したことがある友人なら、MySQL デスクトップ クライアント ソフトウェアに匹敵するフレンドリーな ES デスクトップ クライアント ソフトウェアがないことを知っているはずです。ES を使用するのは非常に面倒で、よく不満がある 3 つの点があります。について:

  1. 上級テスターの不満: テクノロジーの選択に ES を選択する必要があるのはなぜですか。データの追加、削除、変更、チェックが面倒で、テストの効率に重大な影響を及ぼします。

  1. R&D Xiaobai は次のように不満を述べました: 新しいインデックスを作成するとき、フィールド タイプを設定するのはなぜこんなに面倒で、スクリプトをたくさん書かなければなりません。

  1. 研究開発引き継ぎに関する苦情: 非常に多くのインデックスフィールドがありますが、各フィールドは何を意味しますか? 関連する資料はないのでしょうか?

理想的なプログラマー:

ツールがないなら自分で作るということですが、プログラマーにとって小さなツールを書くというのは、ちょっと考えただけでできるものではないでしょうか。言われたとおりに実行するだけで、このツールがみんなの前に現れるまでに時間はかかりませんでした。kibana や ES-header よりも便利で使いやすいです。同僚も非常に良いと評価しています。インターフェースの一部以下のとおりであります:

ツールの詳細については、ぜひ参考にしていただき、ぜひ試していただき、提案していただきたいと思います。

ダウンロードリンク: https://github.com/duzhimin/fast-es/releases/download/v1.0/FastES_v1.0_Setup.exe

機能紹介:https://github.com/duzhimin/fast-es/blob/main/docs/instructions.md

ここで問題が発生します。

いいねの後に苦情が続きますが、苦情のポイントは次の 2 つです。

  1. 醜いインターフェース: Java Swing に基づいて開発されており、本質的に醜い

  1. クロスプラットフォームでは使用できません: Windows でのみ使用できます

どうしたの?

問題には常に解決策があります。

このクライアントを開発するためのクロスプラットフォームで美化されたテクノロジー スタックを探しています

1. 技術の選択

技術的な調査を行った後、最終的に次の理由から Electron-vite を選択しました。

  1. 電子:

Electron は、JavaScript、HTML、CSS を使用してデスクトップ アプリケーションを構築するためのフレームワークです。Chromium と Node.js を同じランタイム環境にマージすることで、Mac、Windows、Linux プラットフォームと互換性のあるアプリケーションを構築します。電子を使用することで、クロスプラットフォーム + 美化を実現できます。

  • アドバンテージ:

開発が簡単で、技術スタックはフロントエンドの学生に適しています (UI は Web 技術を使用し、システム API 対話部分は NodeJS を使用します)

  • 欠点:

1) パッケージング量が多く、ChromiumとNodeJSの実行環境をパッケージ化する必要がある

2) メモリ消費量が大きい:Chromium 自体のメモリ消費量が多く、NodeJS は JIT で動作するため、C++ や他の AOT 言語と比較するとメモリ消費量も多くなります。

  1. 素早く:

Vite は、フロントエンド開発エクスペリエンスを大幅に向上させる新しいフロントエンド構築ツールです。

  1. 電子バイト

Electron-vite は、Electron により高速かつ合理化された開発エクスペリエンスを提供するように設計された新しい Electron 開発ビルド ツールです。

  1. ビュー+エレメントプラス

言うまでもなく、これら 2 つは非常に成熟したフロントエンド開発フレームワークであり、

環境構築:

1.nodejsをインストールする

https://nodejs.org/ja/v18.14.1 _

2. Node.js が正しくインストールされているかどうかを確認するには、ターミナルに次のコマンドを入力してください。

ノード -v

npm -v

3. まずフォルダーを作成し、npm パッケージを初期化します。

mkdir 私の電子アプリ && cd 私の電子アプリ

npm初期化

4. Electron パッケージをアプリケーションの開発依存関係にインストールします。

npm install --save-dev Electron

package.json 構成ファイルの script フィールドに start コマンドを追加します。

{
"scripts": {
"start": "electron ."
}
}

6. start コマンドを使用すると、アプリケーションを開発モードで開くことができます: npm start

7. vscodeをインストールする

フロントエンド開発ツール

8. エレメントプラスをインストールする

npm install element-plus --save

クイックスタート

  1. npm create @quick-start/electron

プロンプトに従ってプロジェクト名を段階的に入力します。

  1. npm start を実行して、関連するインターフェイスを確認します。

備考 (ネットワーク上の理由により、npm による関連パッケージのダウンロードでエラーが発生する可能性があります。もう一度お試しください)

効果

おすすめ

転載: blog.csdn.net/duzm200542901104/article/details/129244662