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

Copy after login

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

Copy after login

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
  }

Copy after login

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 # 本地安装方式 推荐

Copy after login

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')

Copy after login

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');

Copy after login

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

Copy after login

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 .

Copy after login

This code will

Debugging

First, execute in the terminal:

npm run serve

Copy after login

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

Copy after login

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:

First the vue project you wrote is detected by the vue development server
The development server will Compile and package
electron accesses the vue development server and gets the web page and code, similar to a browser
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:

The library needs to be packaged when vue’s development server is packaged Package it in
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"
    }
}

Copy after login

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

Copy after login

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

Copy after login

它会重新编译链接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，就跳过语法分析直接转为汇编语言。

但是它有几个缺点：