Maison > Article > interface Web > Configuration|Méthode de configuration de electronic+vue+ts+sqlite
Configuration|Méthode de configuration de electronic+vue+ts+sqlite
- 不言original
- 2018-07-09 11:47:084182parcourir
Cet article présente principalement la méthode de configuration de |electron+vue+ts+sqlite. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer
Depuis la programmation. modèle Du point de vue de l'interface graphique, l'utilisation de langages déclaratifs pour déclarer les styles et les mises en page, et l'utilisation de langages de programmation complets pour écrire une logique métier sont considérées comme la meilleure pratique pour les programmes GUI.
Je dois écrire un projet personnel récemment, j'ai donc naturellement pensé à utiliser le front-end pour écrire l'interface. Grâce à Electron, vous pouvez utiliser la technologie frontale pour développer des programmes de bureau. Cela équivaut en fait à intégrer un noyau de navigateur Webkit, mais avec une certaine personnalisation et optimisation.
De plus, le framework front-end utilise Vue, que je connais. Le code de l'interface et le code principal sont écrits en dactylographie. Son système de types statiques est très puissant et combine les avantages du statique et du code principal. langages dynamiques.
Configuration d'initialisation
Initialiser vue et typescrpt
npm install --global @vue/cli # 2. 创建一个新工程，并选择 "Manually select features (手动选择特性)" 选项 vue create idocumentation
Vérifier le typescript, les autres vérifier si nécessaire .
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 # 分离配置文件
De cette façon, l'échafaudage vue initialisera automatiquement la structure du projet typescript + vue pour vous.
TSLint vérifiera le format et les spécifications du code, vous aidera à standardiser le format et vous aidera également à éviter les bugs causés par de mauvaises habitudes.
Cependant, la configuration par défaut est un peu stricte. Cela peut être fait en modifiant tslint.jsonVoici ma configuration :
"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
}
Si vous pensez qu'un certain contrôle est trop strict, vous pouvez le désactiver. éteint. Plus précisément, les champs sont référencés ici : https://palantir.github.io/ts...
Installer et configurer électronique
Première installation :
npm install -g electron # 全局安装方式 npm install electron # 本地安装方式 推荐
Puis écrivez electronLe code d'entrée du processus principal, voici une référence, mettez-le dans main.js dans le répertoire racine du projet :
https://github.com/electron/e...
Remarque Il y a une ligne dedans :
mainWindow.loadFile('index.html')
Il s'agit du fichier de la page frontale chargé au démarrage d'Electron. Bien sûr, vous pouvez également laisser l'électron se charger à partir de l'URL, tout comme. en l'ouvrant avec un navigateur :
mainWindow.loadURL('http://localhost:8080'); Le workflow général consiste à utiliser le serveur de développement vue pour démarrer le serveur de développement vue, et le serveur de développement vue écoutera sur le port 8080.
Le serveur écoutera les événements du système de fichiers. Lorsque le code du projet est modifié, il sera recompilé et empaqueté.
Par conséquent, lors du développement, il est plus pratique de laisser electronic charger la page principale à partir du serveur de développement vue.
Ajoutez enfin sous package.json :
"main": "main.js",
// ...
"scripts": {
"electron": "node node_modules/electron/cli.js ."
},
Parmi eux, le champ main précise le fichier d'entrée du projet, qui est le main.js qui vient d'être écrit. La signification de la configuration
scripts est que lorsque npm run electron est exécuté dans le terminal, il sera exécuté :
node node_modules/electron/cli.js .
Ce code sera
débogué
Tout d'abord, exécutez dans le terminal :
npm run serve
Cela démarrera le serveur de débogage vue, qui écoute généralement le port 8080. Cependant, ce serveur est relativement intelligent s'il constate que le 8080 est occupé, il changera activement de port. Si vous l'utilisez avec Electron, vous devez y prêter attention lors du débogage.
Si vous ouvrez http://127.0.0.1:8080 dans le navigateur à ce moment-là, vous pouvez toujours y accéder normalement, mais il est préférable de déboguer en électron. Étant donné que le projet Electron peut impliquer des appels à des bibliothèques liées au système d'exploitation telles que fs, l'utilisation du navigateur n'est pas prise en charge.
Deuxièmement, ouvrez un autre onglet dans le terminal et exécutez :
npm run electron
Si tout se passe bien, l'interface graphique d'Electron s'ouvrira normalement !
Configuration du packaging
Cependant, il existe encore quelques problèmes avec la configuration ci-dessus. Regardons le processus du projet vue :
Tout d'abord, le projet vue que vous avez écrit est détecté par le serveur de développement vue
Le développement le serveur compilera et emballera
electron accède au serveur de développement vue et obtient la page Web et le code, tout comme un navigateur
La page Web et le code sont dans l'environnement électronique Rendu, exécution
Ensuite, si une bibliothèque veut être utilisée normalement, elle doit répondre à :
La bibliothèque doit être empaquetée lorsque le serveur de développement de vue est empaqueté. Emballez-la dans
L'environnement électronique doit prendre en charge le fonctionnement de la bibliothèque
Cependant, la configuration par défaut de l'empaquetage de vue est destinée aux navigateurs et ne sera pas nécessaire. Il n'est pas nécessaire de empaqueter les bibliothèques liées au système d'exploitation. Si vous appelez directement fs et d'autres bibliothèques à ce moment, une erreur se produira.
La solution est de modifier la configuration de webpack, éditer vue.config.js, le contenu est :
module.exports = {
configureWebpack: {
target: "electron-renderer"
}
}
plan de configuration SQLite
Introduire SQLite dans le projet Electron est vraiment une torture ! Ahhhhh ! Il y a un problème avec la configuration, le code ne peut pas être écrit et même s'il est écrit, il ne peut pas être exécuté.
Cela m'a pris tout l'après-midi et je n'ai pas encore complètement résolu ce problème. Si quelqu'un a une bonne solution, faites-le moi savoir. Merci !
Problème 1
Actuellement, il y a deux problèmes lors de l'introduction de SQLite.
Le premier problème est que puisque sqlite est écrit en C, il rencontrera des problèmes de compilation et de liaison lors de l'installation.
Si vous directement :
npm i --save sqlite
alors vous obtiendrez certainement une erreur lorsque vous introduirez le package sqlite. Parce qu'Electron ne peut pas appeler la bibliothèque binaire native de SQLite.
Problème 2
Même si vous résolvez le problème 1, il n'est pas encore terminé, il y a un problème plus grave.
Comme mentionné précédemment, le code du programme Vue doit être compilé et empaqueté par webpack. Cependant, l'empaquetage webpack ne peut pas empaqueter de modules natifs, tels que 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入口文件中，尝试了下发现可以使用。
方案二
方案一解决了问题一。那么还有问题二没有解决。
我们梳理下现在手上的问题：
sqlite库能够在electron主进程运行。
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，就跳过语法分析直接转为汇编语言。
但是它有几个缺点：
只能操作内存中的数据库，无法操作文件系统
性能和原生实现的sqlite相比，很显然，不高
如果在electorn中要拿它暂时用一用，则需要把数据库完全读入到内存中操作。处理不好，内存会爆炸的。
好在我这里需要用的sqlite只是存存元数据，几十k大小，还是能勉强用用到。先临时用这个顶上，封装一层，写后续的代码。前端和node发展很快，等以后有人弄出easy的解决方案了，再切换回sqlite模块。
方案四
方案四则是看看能不能改下项目的技术选型，要不换个其它的嵌入式数据库？
最后
electron的优点在于大大降低了开发成本，本身前端的方式开发界面就是一种良好的实践的，而前端蓬勃发展的今天又有大量的框架和组件库可供直接调用。
记得大学里写过GTK和Qt的图形界面，对比之下，传统的Qt写界面非常麻烦费事，而且也远远没有前端漂亮，动态性也差一大截。
不过electron的缺点在于打包后体积太大，而且运行性能不高。不过一般的场景中，这点缺点问题不大。
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!