設定_;electron+vue+ts+sqlite配置

プログラミングモデルの観点から言えば、声明式言語を使ってスタイルとレイアウトを声明し、機能の整ったプログラミング言語を使って業務ロジックを作成することは、GUIプログラムの最高の実践と言えます.
最近は個人のプロジェクトを書きますので、フロントエンドを使ってインターフェースを書きたいです.electronでフロントエンド技術を使ってデスクトップエンドプログラムを開発できます.それは実際にはwebkitブラウザの核心を埋め込んでいます.裁断と最適化をしただけです.
また、フロントエンドフレームは私がよく知っているvueを使っています.インタフェースコードでもコアコードでもtypescriptを使って作成しています.静的なタイプのシステムが強くて、静的な言語と動的な言語の長所を総合しています.
初期設定
vueとtypescrptを初期化します.

npm install --global @vue/cli
# 2.        ，    "Manually select features (      )"   
vue create idocumentation

typescriptをチェックして、他のものは必要に応じてチェックします.

Vue CLI v3.0.0-rc.3
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, Router, Vuex, Linter
? Use class-style component syntax? No #     class       
? Use Babel alongside TypeScript for auto-detected polyfills? (Y/n)Yes
? Pick a linter / formatter config: TSLint
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files #       

このように、vue足場は自動的にtypescript+vueプロジェクトの構造を初期化してくれます.中に入ってみてもいいです.
TSLintはコードのフォーマットと仕様をチェックします.フォーマットを規範化してくれます.また、悪い習慣がもたらすバグを避けるためにも役立ちます.でも、デフォルトの設定はちょっと厳しいです.これはtslint.jsonを修正してできます.以下は私の構成です.

  "rules": {
    "quotemark": [false, "single"],
    "indent": [true, "spaces", 2],
    "interface-name": false,
    "ordered-imports": false,
    "object-literal-sort-keys": false,
    "no-consecutive-blank-lines": false,
    "eofline": false,
    "prefer-const": false,
    "no-console": false,
    "trailing-comma": false,
    "max-classes-per-file": false
  }

ある検査が厳しすぎると思ったら、消してもいいです.具体的なフィールドはここを参考にしてください.https://palantir.github.io/ts...
セットアップelectron
最初にインストール:

npm install -g electron #       
npm install electron #          

次に、electronメインプロセスの入口コードを作成し、ここではプロジェクトのルートディレクトリのmain.jsに参照があります.https://github.com/electron/e...
一行があることに気づきました.

mainWindow.loadFile('index.html')

これはelectron起動時にロードされたフロントエンドのページファイルです.もちろん、electronをurlからローディングに変更することもできます.ブラウザで開くように:

mainWindow.loadURL('http://localhost:8080');

一般的なワークフローは、vueの開発サーバを使ってvueの開発サーバを起動し、vue開発サーバが8080ポートで傍受します.サーバーはファイルシステムのイベントをモニターしています.プロジェクトコードを修正したら、再度コンパイルして包装します.
そのため、開発時にはweueの開発サーバからホームページを読み込ませると開発が便利になります.
最後にpackage.jsonで参加します.

"main": "main.js",
// ...
  "scripts": {
    "electron": "node node_modules/electron/cli.js ."
  },

ここで、mainフィールドは、プロジェクトのエントリファイル、すなわち、先ほど作成したmain.jsを指定します.scriptsの構成は、端末がnpm run electronを実行するときに実行されるという意味である.

node node_modules/electron/cli.js .

このコードは
デバッグ
まず、端末で実行します.

npm run serve

これはvueのデバッグサーバーを起動します.一般的に盗聴しているのは8080ポートです.しかし、このサーバーはスマートです.8080が占有されていると発見されたら、積極的にポートを交換します.もしelectronと組み合わせて使う時にデバッグする時はこの点に注意してください.
この時はブラウザでhttp://127.0.0.1:8080を開けても正常にアクセスできますが、やはりelectronでデバッグしたほうがいいです.electronプロジェクトは、fsなどのオペレーティングシステム関連ライブラリの呼び出しに関わる可能性があるので、ブラウザを使うのはサポートされていません.
第二に、端末はもう一つのtabを再開し、実行:

npm run electron

うまくいけば、electronのGUIが正常にオープンします.
パッケージ設定
しかし、上の配置にはまだ問題があります.私たちはvueプロジェクトの流れを見に来ました.

まずあなたが作成したvueプロジェクトはvueの開発サーバによって

を検出されました.

開発サーバは、それをコンパイルし、パッケージ化します.

electronはvue開発サーバにアクセスして、ウェブページとコードを持って、ブラウザのように

です.

ページとコードはelectron環境においてレンダリングされ、実行されます.
では、もし在庫が正常に使いたいなら、満足する必要があります.

vueの開発サーバは、パッケージ化する時に、このライブラリを

に包装する必要があります.

electron環境では、このライブラリの実行をサポートする必要がある

しかし、デフォルトのvueパッケージ設定はブラウザ向けであり、OS関連のライブラリを梱包する必要もない.この場合、fsなどのライブラリを直接呼び出したら、エラーが発生する.ソリューションはwebpackの構成を変更し、vue.config.jsを編集し、内容は:

module.exports = {
    configureWebpack: {
        target: "electron-renderer"
    }
}

sqlite配置案
electronプロジェクトにsqliteを導入することは本当に一種の苦難です.ああ、ああ配置に問題があって、コードが全部書けなくて、書いても実行できません.午後の時間になりましたが、まだこの問題を完全に解決していません.いい案があれば教えてください.ありがとうございます.
問題1
現在sqliteを導入すると二つの問題が発生します.最初の問題はsqliteです.Cで作成されたものですので、インストール時にコンパイル、リンクの問題があります.直接:

npm i --save sqlite

じゃ、sqliteバッグを導入すると、間違いがあります.electronはsqliteのnativeバイナリライブラリを呼び出すことができませんので.
問題2
問題を解決したとしても、まだ終わっていません.もっと大きな問題があります.
前に述べたように、vueプログラムコードはwebpackによってコンパイルされ、包装される必要がありますが、webpackはnativeモジュールを包装できません.sqliteのようなものです.
ここで言うと、これはバグではなく、フィーチャーです.https://github.com/mapbox/nod...
可能な解決策
プラン1
だめですsqliteのバイナリライブラリファイルをelectronのバイナリファイルにリンクする必要があります.そうです.CまたはC++プログラムを構成するように怖いです.幸い既成のツールがあります.実行:

npm i --save-dev electron-rebuild
./node_modules/.bin/electron-rebuild

リンクのelectronを再コンパイルします.成功できるかどうかは運次第です.私はWindowsの下で試してみましたが、python環境が必要だと言っています.あとはインターネットのリンクで何かのプリコーディングや翻訳が必要ですか?
その後、linux環境の下で試してみました.成功しました.その後、electronのメインプロセス、つまり前述のmain.jsエントランスファイルの中で、試してみました.
シナリオ2
ソリューションが解決されました.では、まだ問題があります.解決されていません.今手元の問題を整理します.

sqliteライブラリは、electronメインプロセスで動作することができます.

sqliteライブラリはwebapckのためにレンダリング中に動作しません.

実際のsqlite呼び出しをメインプロセスで実行させ、レンダリングプロセスをIPC方式でメインプロセスと通信させるという自然な発想です.このようなプロセスをカプセル化すると、すなわちレンダリングプロセス中にある包装類を呼び出してsqlite 3を呼び出すが、包装類は対応する呼び出し情報をIPCを通じてメインプロセスに送信し、メインプロセスは本当にsqlite 3モジュールを呼び出して操作を完了する.このような方式でカプセル化したら、リモートプロセスの呼び出し(RMI)です.必要が高くなければ、包装しなくてもいいです.
案3
案三は他の代替案を使っています.sql.jsというライブラリがありますが、sqliteを操作することもできます.この倉庫はとても面白いです.純粋にjsで実現しました.どうやってできますか?性能がいいですか?正確にはjsではないです.このライブラリは手書きコードではなく、Emscriptenを使ってsqliteのC言語をasm.jsにコンパイルします.asm.jsはjsの厳格なサブセットで、モデルとCはもっと対応できます.jsエンジンがasm.jsで実行されていることを発見したら、文法分析をスキップして直接にアセンブル言語に移行します.
しかし、いくつかの欠点があります.

は、メモリ内のデータベースしか操作できません.ファイルシステム

を操作することができません.

の性能は原生の実現したsqliteと比較して、明らかに高くないです.
electornで一時的に使うには、データベースをメモリに完全に読み込む必要があります.処理がよくないとメモリが爆発します.
幸い、ここで使うべきsqliteはメタデータだけを保存します.数十kの大きさで、やはり無理して使うことができます.まずこのトップを仮用して、層をカプセル化して、後続のコードを書きます.先端とnodeの発展が速くて、後でeasyの解決策を作り出してからsqliteモジュールに切り替えます.
案四
プロジェクトの技術選択を変えてもいいですか?他の組み込みデータベースに変えてもいいですか?
最後に
electronの利点は、開発コストを大幅に削減することにあります.自分のフロントエンドの方式でインターフェースを開発するのは良い実践です.そして、フロントエンドが盛んに発展している今日は、大量のフレームとコンポーネントライブラリが直接に呼び出されます.大学でGTKとQtのグラフィックインターフェースを書いたのを覚えています.対照的に、伝統的なQtはインターフェースを書くのが面倒くさいです.それに、先端が綺麗で、ダイナミック性もかなり悪いです.
しかし、electronの欠点は、荷造り後の体積が大きすぎて、運行性能が高くないことです.しかし、一般的なシーンでは、これぐらいの欠点は問題ないです.