Konfiguration|Konfigurationsmethode von Electron+vue+ts+sqlite

In diesem Artikel wird hauptsächlich die Konfigurationsmethode von |electron+vue+ts+sqlite vorgestellt. Jetzt kann ich sie mit Ihnen teilen.

Aus der Programmierung Modell Aus der GUI-Perspektive gilt die Verwendung deklarativer Sprachen zum Deklarieren von Stilen und Layouts sowie die Verwendung voll ausgestatteter Programmiersprachen zum Schreiben von Geschäftslogik als beste Vorgehensweise für GUI-Programme.

Ich muss kürzlich ein persönliches Projekt schreiben, daher habe ich natürlich darüber nachgedacht, das Frontend zum Schreiben der Benutzeroberfläche zu verwenden. Mit Electron können Sie Front-End-Technologie nutzen, um Desktop-Programme zu entwickeln. Es entspricht tatsächlich der Einbettung eines Webkit-Browserkerns, jedoch mit einigen Anpassungen und Optimierungen.

Darüber hinaus verwendet das Front-End-Framework Vue, mit dem ich vertraut bin. Sowohl der Schnittstellencode als auch der Kerncode sind in Typoskript geschrieben und kombinieren die Vorteile von statischem und dynamische Sprachen.

Initialisierungskonfiguration

Vue und Typescrpt initialisieren

npm install --global @vue/cli
# 2. 创建一个新工程，并选择 "Manually select features (手动选择特性)" 选项
vue create idocumentation

Typoskript prüfen, andere nach Bedarf prüfen.

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 # 分离配置文件

Auf diese Weise hilft Ihnen das Vue-Gerüst automatisch dabei, die Struktur des Typoskript- und Vue-Projekts zu initialisieren. Sie können hineingehen und einen Blick darauf werfen.

TSLint überprüft das Format und die Spezifikationen des Codes, hilft Ihnen bei der Standardisierung des Formats und hilft Ihnen auch, Fehler zu vermeiden, die durch schlechte Gewohnheiten verursacht werden.
Die Standardkonfiguration ist jedoch etwas streng. Dies kann durch Ändern erfolgen. tslint.json Das Folgende ist meine Konfiguration:

  "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
  }

Wenn Sie der Meinung sind, dass eine bestimmte Prüfung zu streng ist, können Sie sie ändern aus, spezifische Felder Referenz hier: https://palantir.github.io/ts...

Elektron installieren und konfigurieren

Erste Installation:

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

Dann schreiben Sie die electron Hauptprozess-Eintragscode, hier ist eine Referenz, fügen Sie ihn in main.js im Projektstammverzeichnis ein:
https://github.com/electron/e...

Beachten Sie das Darin befindet sich eine Zeile:

mainWindow.loadFile('index.html')

Dies ist die Frontend-Seitendatei, die beim Start von Electron geladen wird. Natürlich können Sie Electron auch über die URL laden lassen, genau wie beim Öffnen mit einem Browser:

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

Der allgemeine Arbeitsablauf lautet: Verwenden Sie den Vue-Entwicklungsserver, um den Vue-Entwicklungsserver zu starten, und der Vue-Entwicklungsserver überwacht Port 8080.
Der Server überwacht Dateisystemereignisse. Wenn der Projektcode geändert wird, wird er neu kompiliert und verpackt.

Daher ist es bei der Entwicklung bequemer, Electron die Hauptseite vom Vue-Entwicklungsserver laden zu lassen.

Schließlich unter package.json hinzufügen:

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

Unter anderem gibt das Feld main die Eintragsdatei des Projekts an, bei der es sich um das soeben geschriebene main.js handelt. Die Bedeutung der

scripts-Konfiguration besteht darin, dass, wenn npm run electron im Terminal ausgeführt wird, Folgendes ausgeführt wird:

node node_modules/electron/cli.js .

Dieser Code wird

debugieren

Führen Sie zunächst im Terminal Folgendes aus:

npm run serve

Dadurch wird der Vue-Debugging-Server gestartet, der im Allgemeinen auf Port 8080 lauscht. Dieser Server ist jedoch relativ intelligent. Wenn er feststellt, dass 8080 belegt ist, ändert er aktiv den Port. Wenn Sie es mit Elektron verwenden, sollten Sie beim Debuggen darauf achten.

Wenn Sie http://127.0.0.1:8080 zu diesem Zeitpunkt im Browser öffnen, können Sie weiterhin normal darauf zugreifen, aber es ist am besten, das Debugging in Electron durchzuführen. Da das Electron-Projekt möglicherweise Aufrufe von betriebssystembezogenen Bibliotheken wie fs beinhaltet, wird die Verwendung des Browsers nicht unterstützt.

Zweitens öffnen Sie einen weiteren Tab im Terminal und führen Folgendes aus:

npm run electron

Wenn alles gut geht, öffnet sich die Elektronen-GUI normal!

Verpackungskonfiguration

Es gibt jedoch immer noch einige Probleme mit der oben genannten Konfiguration. Schauen wir uns den Prozess des Vue-Projekts an:

1. Zuerst wird das von Ihnen geschriebene Vue-Projekt vom Vue-Entwicklungsserver erkannt

2. Die Entwicklung Der Server kompiliert und verpackt

3. Electron greift auf den Vue-Entwicklungsserver zu und ruft die Webseite und den Code ab, genau wie ein Browser

4. Die Webseite und Code befinden sich in der Elektronenumgebung. Rendering, Ausführung

Wenn eine Bibliothek dann normal verwendet werden soll, muss sie Folgendes erfüllen:

1. Die Bibliothek muss gepackt werden, wenn der Entwicklungsserver von vue gepackt wird. Packen Sie es in

2. Die Elektronenumgebung muss den Betrieb der Bibliothek unterstützen

Die Standardkonfiguration für die Vue-Paketierung gilt jedoch nicht für Browser. Es besteht keine Notwendigkeit, betriebssystembezogene Bibliotheken zu packen. Wenn Sie zu diesem Zeitpunkt fs und andere Bibliotheken direkt aufrufen, tritt ein Fehler auf.
Die Lösung besteht darin, die Konfiguration des Webpacks zu ändern und vue.config.js zu bearbeiten. Der Inhalt lautet:

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

SQLite-Konfigurationsplan

Die Einführung von SQLite in das Elektronenprojekt ist wirklich eine Qual! Ahhhhh! Mit der Konfiguration stimmt etwas nicht, der Code kann nicht geschrieben werden und selbst wenn er geschrieben ist, kann er nicht ausgeführt werden.
Es hat den ganzen Nachmittag gedauert und ich habe dieses Problem noch nicht vollständig gelöst. Wenn jemand eine gute Lösung hat, lassen Sie es mich bitte wissen.

Problem 1

Aktuell wird es zwei Probleme bei der Einführung von SQLite geben.
Das erste Problem besteht darin, dass SQLite, da es in C geschrieben ist, während der Installation auf Kompilierungs- und Verknüpfungsprobleme stößt.
Wenn Sie direkt:

npm i --save sqlite

dann erhalten Sie auf jeden Fall eine Fehlermeldung, wenn Sie das SQLite-Paket einführen. Weil Electron die native Binärbibliothek von SQLite nicht aufrufen kann.

Problem 2

Auch wenn Sie Problem 1 lösen, ist es noch nicht vorbei, es gibt ein größeres Problem.

Wie bereits erwähnt, muss der Vue-Programmcode per Webpack kompiliert und gepackt werden. Webpack-Pakete können jedoch keine nativen Module wie SQLite packen.

这里提到，这不是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的返回值的实例

Das obige ist der detaillierte Inhalt vonKonfiguration|Konfigurationsmethode von Electron+vue+ts+sqlite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!