這篇文章主要介紹了關於配置|electron vue ts sqlite的配置方法，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下
從程式設計模型的角度來說，使用聲明式語言聲明樣式和佈局，使用功能完整的程式語言編寫業務邏輯，算是GUI程式的一種最好的實踐了。
最近要寫一個個人項目，於是我自然想到要使用前端來寫介面。透過electron就能使用前端技術開發桌面端程式。它其實相當於內嵌了一個webkit瀏覽器核心，只是做了些裁剪和優化。
此外，前端框架使用我所熟悉的vue，無論是介面程式碼或核心程式碼都採用typescript編寫，它的靜態型別系統很強大，綜合了靜態語言和動態語言的優點。
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...
#首先安裝：
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的開發伺服器偵測到
解決方案是修改webpack的配置，編輯
vue.config.js，內容為：
module.exports = {
configureWebpack: {
target: "electron-renderer"
}
}搞了我一整個下午的時間，目前我還沒有完全解決這個問題，如果誰有好的方案請告訴我，謝謝！
第一個問題則是sqlite由於是C寫的，安裝時會遇到編譯、連結的問題。
如果直接：
npm i --save 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中文网！
相关推荐：
以上是配置|electron+vue+ts+sqlite的配置方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
