집 > 기사 > 웹 프론트엔드 > 구성|electron+vue+ts+sqlite 구성 방법

구성|electron+vue+ts+sqlite 구성 방법

不言원래의: 2018-07-09 11:47:084305검색

이 글은 주로 |electron+vue+ts+sqlite의 구성 방법을 소개합니다. 이는 특정 참고 가치가 있습니다. 이제는 필요한 친구들이 참고할 수 있습니다.

프로그래밍 모델 관점에서 선언 스타일을 사용하세요. 선언적 언어로 레이아웃을 작성하고 완전한 기능을 갖춘 프로그래밍 언어로 비즈니스 로직을 작성하는 것은 GUI 프로그램의 모범 사례로 간주됩니다.

요즘 개인 프로젝트를 작성해야 해서 자연스럽게 프론트엔드를 활용해서 인터페이스를 작성하려고 생각하게 됐어요. Electron을 통해 프런트엔드 기술을 사용하여 데스크톱 프로그램을 개발할 수 있습니다. 이는 실제로 웹킷 브라우저 코어를 내장하는 것과 동일하지만 일부 조정 및 최적화가 필요합니다.

또한 프런트엔드 프레임워크는 제가 익숙한 Vue를 사용합니다. 인터페이스 코드와 핵심 코드가 모두 TypeScript로 작성되었습니다. 정적 유형 시스템은 매우 강력하며 정적 언어와 동적 언어의 장점을 결합합니다.

초기화 구성

vue 및 typecrpt

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을 수정하여 수행할 수 있습니다. 내 구성은 다음과 같습니다. 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...

安装配置electron

首先安装：

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

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

注意到其中有一行：

mainWindow.loadFile('index.html')

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

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

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

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

最后在package.json下加入：

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

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

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

node node_modules/electron/cli.js .

这段代码会

调试

首先，在终端里执行：

npm run serve

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

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

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

npm run electron

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

打包配置

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

首先你编写的vue项目被vue的开发服务器检测到
开发服务器会将其编译、打包
electron访问vue开发服务器，拿到网页和代码，类似浏览器一样
网页和代码在electron环境里渲染、执行

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

vue的开发服务器打包时需要将该库打包进来
electron环境中需要支持该库的运行

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

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

특정 검사가 너무 엄격하다고 생각되면 변경할 수 있습니다. off, 구체적으로 여기 필드 참조: https://palantir.github.io/ts...

전자 설치 및 구성

첫 번째 설치:

npm i --save sqlite

그런 다음 `electron`의 항목 코드를 작성하세요. 참고로 프로젝트 루트 디렉터리의 `main.js`에 넣으세요:

https://github.com/electron/e...

한 줄이 있다는 점에 유의하세요. 그 안에:

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

이것은 전자가 시작될 때 로드되는 프런트 엔드 페이지 파일입니다. 물론, 브라우저로 여는 것처럼 URL에서 전자를 로드하도록 할 수도 있습니다:

rrreee

일반적인 작업 흐름은 다음을 사용하는 것입니다. vue 개발 서버를 시작하려면 vue 개발 서버를 시작하세요. vue 개발 서버는 포트 8080에서 수신 대기합니다.

서버는 파일 시스템 이벤트를 모니터링하며 프로젝트 코드가 수정되면 다시 컴파일하고 패키징합니다.

그래서 개발할 때 Vue 개발 서버에서 메인 페이지를 전자 로드하도록 하는 것이 더 편리할 것입니다.

마지막으로 package.json 아래에

rrreee🎜를 추가합니다. 그 중 main 필드는 프로젝트의 항목 파일인 main.js를 지정합니다. 방금 작성한 코드입니다. 🎜🎜스크립트 구성의 의미는 터미널에서 npm run electronic을 실행할 때 다음이 실행된다는 것입니다. 🎜rrreee🎜이 코드는 🎜🎜debug🎜🎜먼저, 터미널 내부 실행: 🎜rrreee🎜 일반적으로 포트 8080을 수신하는 vue 디버깅 서버를 시작합니다. 하지만 이 서버는 비교적 똑똑합니다. 8080이 사용 중인 것을 발견하면 적극적으로 포트를 변경합니다. Electron과 함께 사용한다면 디버깅할 때 이 점에 주의해야 합니다. 🎜🎜이때 브라우저에서 http://127.0.0.1:8080을 열면 여전히 정상적으로 접속이 가능하지만, Electron에서 디버깅하는 것이 가장 좋습니다. 전자 프로젝트에는 fs와 같은 운영 체제 관련 라이브러리에 대한 호출이 포함될 수 있으므로 브라우저 사용은 지원되지 않습니다. 🎜🎜두 번째로 터미널에서 다른 탭을 열고 다음을 실행하세요. 🎜rrreee🎜모든 것이 순조롭게 진행되면 전자 GUI가 정상적으로 열립니다! 🎜🎜포장 구성🎜🎜그러나 위 구성에는 여전히 몇 가지 문제가 있습니다. vue 프로젝트의 프로세스를 살펴보겠습니다: 🎜

🎜먼저, 작성한 vue 프로젝트가 vue 개발 서버에 의해 감지됩니다🎜
🎜 개발 서버는 이를 컴파일하고 패키징합니다🎜
🎜electron은 vue 개발 서버에 액세스하여 브라우저처럼 웹 페이지와 코드를 가져옵니다🎜
🎜웹 페이지와 코드는 다음과 같습니다. 전자 환경에서 렌더링 및 실행🎜

🎜그리고 라이브러리를 정상적으로 사용하려면 다음을 충족해야 합니다. 🎜

🎜 Vue 개발서버 패키징시 라이브러리 패키징이 필요합니다 들어오세요🎜
🎜전자 환경이 이 라이브러리의 동작을 지원해야 합니다🎜

🎜단, 기본 Vue 패키징은 구성은 브라우저용이므로 운영체제를 설치할 필요가 없습니다. 관련 라이브러리가 패키징되어 있습니다. 이때 fs 및 기타 라이브러리를 직접 호출하면 오류가 발생합니다. 🎜해결책은 webpack의 구성을 수정하고 vue.config.js를 편집하는 것입니다. 내용은 다음과 같습니다. 🎜rrreee🎜sqlite 구성 체계🎜🎜electron 프로젝트에 sqlite를 도입하는 것은 정말 고문입니다! 아아아아! 구성에 문제가 있어 코드를 작성할 수 없고, 작성해도 실행이 되지 않습니다. 🎜오후 내내 시간이 걸렸는데 아직 이 문제를 완전히 해결하지 못했습니다. 혹시 좋은 해결책이 있으면 알려주세요. 감사합니다! 🎜🎜문제 1🎜🎜현재 sqlite를 도입할 때 두 가지 문제가 발생합니다. 🎜첫 번째 문제는 sqlite가 C로 작성되었기 때문에 설치 중에 컴파일 및 링크 문제가 발생한다는 것입니다. 🎜직접적으로 말하면: 🎜rrreee🎜 그렇다면 sqlite 패키지를 도입하면 반드시 오류가 발생합니다. 전자는 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入口文件中，尝试了下发现可以使用。

方案二

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

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中文网！