electron、vue.js、vuex、element-ui、sqlite3

總結一下這兩周的入門之路。

1.安裝node.js

過程就是下載：https://nodejs.org/en/，安裝，完了在命令行窗口，在任何目錄下都可錄入node -v應能看到類似反饋

如果提示"'node' 不是內部或外部命令，也不是可運行的程序"，可以檢查一下系統的環境變量是否包含node.js的安裝的目標目錄。我下載的是壓縮包，解壓后我需要手工添加

 

2.安裝vue-cli。它包含了vue-router，vuex， vue-resource，安裝參考以下文章的安裝部分

https://blog.csdn.net/wulala_hei/article/details/80488674

 

3.使用vue-cli構建electron-vue

https://blog.csdn.net/github_36978270/article/details/78460696

4.安裝element-ui。在項目的目錄下執行以下命令安裝到項目中

npm install --save element-ui

在渲染進程目錄下src/renderer/main.js的頭部添加以下代碼。下面的"..."是指原文件已有的任意存在或不存在的代碼。

...
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI);
...

具體每個UI組件用法參考Element UI

5.vuex的使用，我參考了這篇文章

https://segmentfault.com/a/1190000011557522

但文章的第5點說的commit似乎是有問題的。comit命令應只能在store內部，如其action的方法中使用，vue組件需使用 this.$store.dispatch('methodName') 命令來觸發action中的methodName方法。
但需要注意src\main\index.js需添加以下imprt語句，不然dispatch不會有響應

...
import store from '../renderer/store'
...

 

6.安裝sqlite3

我在win10系統上安裝sqlite3碰了很多釘子，其實在electron上還需要依賴electron-builder.

首先, 添加“postinstall”到我們的package.json文件中:

"scripts": { "postinstall": "install-app-deps" ... } 

接着安裝好electron-builder和sqlite3並執行創建命令，在命令行錄入分別執行以下三個命令，記住命令窗口的當前目錄必須在項目的主目錄下:

npm install --save-dev electron-builder npm install --save sqlite3 npm run postinstall 

electron-builder會根據當前操作系統創建出包含正常binding路徑，並適合Electron使用的原生組件，於是你就能象其他組件一樣直接require其名字

這有一個范例，我覺得不錯，大家可以拿來學習一下

https://www.oschina.net/p/electron-vue-music