設定｜electron+vue+ts+sqliteの設定方法

この記事では主に |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...tslint.json来做到，下面是我的配置：

npm install -g electron # 全局安装方式
npm install electron # 本地安装方式 推荐

如果你觉得某个检查太严了，可以关掉，具体的字段参考这里： https://palantir.github.io/ts...

安装配置electron

首先安装：

mainWindow.loadFile('index.html')

然后编写electron主进程的入口代码，这里有个参考，将它放在项目根目录的main.js中：
https://github.com/electron/e...

注意到其中有一行：

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

这是electron启动时加载的前端页面文件，当然，也可以让electron改为从url加载，就像用浏览器打开一样：

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

一般的工作流是，使用vue的开发服务器启动vue的开发服务器，vue开发服务器会监听在8080端口。
该服务器会监听文件系统事件，当修改了项目代码后，它会重新编译、打包。

所以，开发时，让electron从vue的开发服务器加载主页面，则开发起来更方便。

最后在package.json下加入：

node node_modules/electron/cli.js .

其中，main字段指定项目的入口文件，也就是刚才编写的main.js。

scripts配置的含义是，当在终端运行 npm run electron时，会执行：

npm run serve

这段代码会

调试

首先，在终端里执行：

npm run electron

它会启动vue的调试服务器，一般监听的是8080端口。不过，这个服务器比较智能，如果发现8080被占用会主动换端口。如果和electron搭配使用时调试的时候要注意这一点。

如果这个时候在浏览器打开http://127.0.0.1:8080也能正常访问，但是最好还是要在electron中调试。因为electron项目可能涉及到操作系统相关库的调用如fs，使用浏览器是不支持的。

其次，终端再开一个tab，执行：

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

如果一切顺利，electron的GUI就正常打开了！

打包配置

但是，上面的配置还有一些问题。我们来看vue项目的流程：

1. 首先你编写的vue项目被vue的开发服务器检测到

2. 开发服务器会将其编译、打包

3. electron访问vue开发服务器，拿到网页和代码，类似浏览器一样

4. 网页和代码在electron环境里渲染、执行

那么，如果一个库要想正常使用，需要满足：

1. vue的开发服务器打包时需要将该库打包进来

2. electron环境中需要支持该库的运行

然而，默认的vue打包配置是针对浏览器的，不会也没有必要把操作系统相关的库给打包进来，如果这时直接调用fs等库，会出错。
解决方案是修改webpack的配置，编辑vue.config.js

electron をインストールして構成します

最初にインストールします:

npm i --save sqlite

次に、electron のエントリ コードを書き込みますメインプロセスは次のとおりです。参考までに、プロジェクトのルートディレクトリの main.js に配置します: https://github.com/electron/e...

という行があることに注意してください。その中にあります:

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

これは、electron の開始時にロードされるフロントエンド ページ ファイルです。 もちろん、ブラウザで開くのと同じように、URL から Electron をロードさせることもできます:
rrreee 一般的なワークフローは、 vue 開発サーバーを起動するには、vue 開発サーバー、vue 開発サーバーはポート 8080 で待機します。

サーバーはファイル システム イベントをリッスンし、プロジェクト コードが変更されると、再コンパイルしてパッケージ化します。

そのため、開発するときは、Electron に vue 開発サーバーからメイン ページをロードさせる方が便利です。

最後に、package.json の下に

rrreee

を追加します。このうち、main フィールドは、プロジェクトのエントリ ファイル (main.js) を指定します。 コード> を書きました。

🎜 scripts 設定の意味は、ターミナルで npm run electric を実行するときに次のように実行されることです: 🎜rrreee🎜このコードは🎜🎜debug🎜🎜まず、ターミナル内で実行します: 🎜rrreee🎜 これにより、vue デバッグ サーバーが起動され、通常はポート 8080 をリッスンします。ただし、このサーバーは比較的賢いので、8080 が占有されていることが判明すると、積極的にポートを変更します。 Electron で使用する場合は、デバッグ時に注意する必要があります。 🎜🎜この時点でブラウザで http://127.0.0.1:8080 を開くと、通常どおりアクセスできますが、electron でデバッグすることをお勧めします。 Electron プロジェクトには fs などのオペレーティング システム関連のライブラリへの呼び出しが含まれる場合があるため、ブラウザの使用はサポートされていません。 🎜🎜次に、ターミナルで別のタブを開いて次のコマンドを実行します: 🎜rrreee🎜すべてがうまくいけば、electron GUI が正常に開きます。 🎜🎜パッケージ構成🎜🎜 ただし、上記の構成にはまだいくつかの問題があります。 vue プロジェクトのプロセスを見てみましょう: 🎜

1. 🎜まず、作成した vue プロジェクトが vue 開発サーバーによって検出されます🎜
2. 🎜開発サーバーはそれをコンパイルしてパッケージ化します🎜
3. 🎜electron は vue 開発サーバーにアクセスし、ブラウザと同じように Web ページとコードを取得します🎜
4. 🎜Web ページとコードはElectron 環境でレンダリングおよび実行されます🎜

🎜 次に、ライブラリを通常に使用したい場合は、以下を満たす必要があります: 🎜

1. 🎜 vue 開発サーバーをパッケージ化するときにライブラリもパッケージ化する必要があります。どうぞ🎜
2. 🎜Electron 環境はこのライブラリの動作をサポートする必要があります🎜

🎜ただし、デフォルトの vue パッケージ化設定はブラウザのみであり、OSのインストールは必要ありません。 該当するライブラリがパッケージ化されています。 このときfsなどのライブラリを直接呼び出すとエラーが発生します。 🎜解決策は、webpack の設定を変更し、vue.config.js を編集することです。内容は次のとおりです: 🎜rrreee🎜sqlite 設定スキーム🎜🎜 Electron プロジェクトに sqlite を導入するのは本当に拷問です。ああああ！設定に問題があり、コードを書くことができない、または書いたとしても実行することができません。 🎜 午後丸々かかりましたが、まだこの問題を完全には解決できていません。誰か良い解決策を知っている人がいたら、教えてください。ありがとうございます。 🎜🎜問題1🎜🎜現時点でsqliteを導入すると2つの問題が発生します。 🎜最初の問題は、sqlite は C で書かれているため、インストール中にコンパイルとリンクの問題が発生することです。 🎜直接実行する場合: 🎜rrreee🎜 その後、sqlite パッケージを導入すると、必ずエラーが発生します。 Electron は sqlite のネイティブ バイナリ ライブラリを呼び出すことができないためです。 🎜🎜問題2🎜🎜問題1を解決しても、まだ終わったわけではなく、さらに大きな問題があります。 🎜🎜前述したように、Vue プログラム コードは webpack によってコンパイルおよびパッケージ化する必要がありますが、webpack パッケージ化では sqlite などのネイティブ モジュールをパッケージ化できません。 🎜

这里提到，这不是bug，这是feature：https://github.com/mapbox/nod...

可能的解决方案

方案一

是不行的！你还需要将sqlite的二进制库文件链接到electron的二进制文件上去，对的，就像你配置C或C++程序那样恐怖。好在有现成的工具，执行：

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

它会重新编译链接electron。至于能不能成功，看运气吧。
我在Windows下尝试了下，一会说需要python环境，一会网络链接又不行要下什么预编译包，总之事情很多。

后来在linux环境下尝试了，成功了。之后在electron的主进程里，也就是前面说的main.js入口文件中，尝试了下发现可以使用。

方案二

方案一解决了问题一。那么还有问题二没有解决。
我们梳理下现在手上的问题：

1. sqlite库能够在electron主进程运行。

2. sqlite库由于webapck的原因无法在渲染进程中运行。

那么，一种很自然而然的想法是，让实际的sqlite调用在主进程执行，渲染进程通过IPC方式和主进程通信。
如果把这种过程封装起来，即渲染进程中调用某个包装类来调用sqlite3，而包装类会将对应的调用信息通过IPC发送给主进程，主进程真正调用sqlite3模块来完成操作。
这种方式封装了就是远程过程调用（RMI）了，如果需求不高也可以不封装。

方案三

方案三则是用其它的替代思路了。有一个叫做sql.js的库，也能够操作sqlite。
这个库很有意思，它纯粹用js实现的。怎么做到的？性能能好吗？
准确的说不是js。这个库不是手写的代码，它是使用Emscripten将sqlite的C语言实现编译成asm.js。
而asm.js是一个js的严格子集，模型上和C更能对应上去，一旦js引擎发现运行的是asm.js，就跳过语法分析直接转为汇编语言。

但是它有几个缺点：

1. 只能操作内存中的数据库，无法操作文件系统

2. 性能和原生实现的sqlite相比，很显然，不高

如果在electorn中要拿它暂时用一用，则需要把数据库完全读入到内存中操作。处理不好，内存会爆炸的。

好在我这里需要用的sqlite只是存存元数据，几十k大小，还是能勉强用用到。先临时用这个顶上，封装一层，写后续的代码。前端和node发展很快，等以后有人弄出easy的解决方案了，再切换回sqlite模块。

方案四

方案四则是看看能不能改下项目的技术选型，要不换个其它的嵌入式数据库？

最后

electron的优点在于大大降低了开发成本，本身前端的方式开发界面就是一种良好的实践的，而前端蓬勃发展的今天又有大量的框架和组件库可供直接调用。
记得大学里写过GTK和Qt的图形界面，对比之下，传统的Qt写界面非常麻烦费事，而且也远远没有前端漂亮，动态性也差一大截。

不过electron的缺点在于打包后体积太大，而且运行性能不高。不过一般的场景中，这点缺点问题不大。

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

Vue源码之文件结构与运行机制

ES6 Promise中then与catch的返回值的实例

以上が設定｜electron+vue+ts+sqliteの設定方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。