Configuration|Configuration method of electron+vue+ts+sqlite

This article mainly introduces the configuration method of |electron vue ts sqlite. It has a certain reference value. Now I share it with you. Friends in need can refer to it.

From the perspective of programming model It is said that using a declarative language to declare styles and layouts and using a full-featured programming language to write business logic is a best practice for GUI programs.

I have to write a personal project recently, so I naturally thought of using the front-end to write the interface. Through electron, you can use front-end technology to develop desktop programs. It is actually equivalent to embedding a webkit browser core, but with some tailoring and optimization.

In addition, the front-end framework uses Vue, which I am familiar with. Both the interface code and the core code are written in typescript. Its static type system is very powerful and combines the advantages of static and dynamic languages.

Initialization configuration

Initialize vue and typescrpt

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

Check typescript, others as needed Check.

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

In this way, the vue scaffolding will automatically help you initialize the structure of the typescript vue project. You can go in and take a look.

TSLint will check the format and specifications of the code, help you standardize the format, and also help you avoid bugs caused by bad habits.
However, the default configuration is a bit strict. This can be done by modifying tslint.json. The following is my 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
  }

If you think a certain check is too strict, you can Turn off, refer to here for specific fields: https://palantir.github.io/ts...

Install configuration electron

First install:

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

Then write electronThe entry code of the main process, here is a reference, put it in main.js in the project root directory:
https://github.com/electron/ e...

Notice that there is a line:

mainWindow.loadFile('index.html')

This is the front-end page file loaded when electron starts. Of course, you can also let electron load from the url, just like browsing The same as opening the server:

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

The general workflow is to use the vue development server to start the vue development server, and the vue development server will listen on port 8080.
The server will monitor file system events. When the project code is modified, it will recompile and package.

So, when developing, it is more convenient to let electron load the main page from vue's development server.

Finally add under package.json:

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

Among them, the main field specifies the entry file of the project, which is the ## just written #main.js.

scriptsThe meaning of the configuration is that when npm run electron is run in the terminal, it will be executed:

node node_modules/electron/cli.js .

This code will

Debugging

First, execute in the terminal:

npm run serve

It will start the vue debugging server, which generally listens to port 8080. However, this server is relatively smart. If it finds that 8080 is occupied, it will actively change the port. If you use it with electron, you should pay attention to this when debugging.

If you open

http://127.0.0.1:8080 in the browser at this time, you can also access it normally, but it is best to debug in electron. Because the electron project may involve calls to operating system-related libraries such as fs, using the browser is not supported.

Secondly, open another tab in the terminal and execute:

npm run electron

If everything goes well, the electron GUI will open normally!

Packaging configuration

However, there are still some problems with the above configuration. Let’s look at the process of the vue project:

1. First the vue project you wrote is detected by the vue development server

2. The development server will Compile and package

3. electron accesses the vue development server and gets the web page and code, similar to a browser

4. The web page and code are in the electron environment Rendering and execution

Then, if a library wants to be used normally, it needs to meet the following requirements:

1. The library needs to be packaged when vue’s development server is packaged Package it in

2. The electron environment needs to support the operation of the library

However, the default vue packaging configuration is for browsers and will not There is no need to package operating system-related libraries. If you directly call fs and other libraries at this time, an error will occur.

The solution is to modify the configuration of webpack, edit
vue.config.js, the content is:

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

sqlite configuration scheme

It is true to introduce sqlite in the electron project It's a torture! Ahhhhh! There is something wrong with the configuration, the code cannot be written, and even if it is written, it cannot be run.

It took me all afternoon, but I haven’t completely solved this problem yet. If anyone has a good solution, please tell me, thank you!

Question 1

Currently, there will be two problems when introducing sqlite.

The first problem is that since sqlite is written in C, it will encounter compilation and linking problems during installation.
If you directly:

npm i --save sqlite

Then when you introduce the sqlite package, an error will definitely be reported. Because electron cannot call the native binary library of sqlite.

Question 2

Even if you solve question 1, it is not over yet, there is a bigger problem.

As mentioned before, the Vue program code needs to be compiled and packaged by webpack. However, webpack packaging cannot package native modules, such as 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的返回值的实例

The above is the detailed content of Configuration|Configuration method of electron+vue+ts+sqlite. For more information, please follow other related articles on the PHP Chinese website!