首頁 > web前端 > js教程 > 配置|electron+vue+ts+sqlite的配置方法

配置|electron+vue+ts+sqlite的配置方法

不言
發布: 2018-07-09 11:47:08
原創
4392 人瀏覽過

這篇文章主要介紹了關於配置|electron vue ts sqlite的配置方法,有著一定的參考價值,現在分享給大家,有需要的朋友可以參考一下

從程式設計模型的角度來說,使用聲明式語言聲明樣式和佈局,使用功能完整的程式語言編寫業務邏輯,算是GUI程式的一種最好的實踐了。

最近要寫一個個人項目,於是我自然想到要使用前端來寫介面。透過electron就能使用前端技術開發桌面端程式。它其實相當於內嵌了一個webkit瀏覽器核心,只是做了些裁剪和優化。

此外,前端框架使用我所熟悉的vue,無論是介面程式碼或核心程式碼都採用typescript編寫,它的靜態型別系統很強大,綜合了靜態語言和動態語言的優點。

初始化配置

初始化vue和typescrpt

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會對程式碼的格式和規格做檢查,幫你規範格式,同時也會幫助你避免不好的習慣帶來的bug。
不過預設的配置有點嚴格,這可以修改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專案的流程:

  1. 首先你寫的vue專案被vue的開發伺服器偵測到

  2. ##開發伺服器會將其編譯、打包

  3. electron訪問vue開發伺服器,拿到網頁和程式碼,類似瀏覽器一樣

  4. 網頁和程式碼在electron環境裡渲染、執行

那麼,如果一個函式庫要想正常使用,需要滿足:

  1. vue的開發伺服器打包時需要將該函式庫打包進來

  2. electron環境中需要支援該庫的運行

然而,預設的vue打包配置是針對瀏覽器的,不會也沒有必要把作業系統相關的函式庫打包進來,如果這時直接呼叫fs等函式庫,會出錯。

解決方案是修改webpack的配置,編輯
vue.config.js,內容為:

module.exports = {
    configureWebpack: {
        target: "electron-renderer"
    }
}
登入後複製
sqlite配置方案

electron專案中引入sqlite真的是一種折磨!啊啊啊啊!配置出了問題,程式碼都沒法寫,寫了也沒辦法運行。

搞了我一整個下午的時間,目前我還沒有完全解決這個問題,如果誰有好的方案請告訴我,謝謝!

問題一

目前引入sqlite會遇到兩個問題。

第一個問題則是sqlite由於是C寫的,安裝時會遇到編譯、連結的問題。
如果直接:

npm i --save sqlite
登入後複製
那麼你引入sqlite包時,一定會報錯。因為electron無法呼叫sqlite的native二進位函式庫。

問題二

即使你解決的了問題一,這還沒完,還有一個更大的問題。

前面說過vue程式碼是需要被webpack編譯、打包的,然而webpack打包並不能打包native模組,像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的返回值的实例

以上是配置|electron+vue+ts+sqlite的配置方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板