Electron-vue項目初探（一）：搭建項目

項目裏要用Electron，研究方向是本地數據庫/緩存相關，正好年終歸賬時發現excel效率太低，且分析維度有限，準備用Electron-vue+SQLite3+SQLCipher搭一個簡單版的交易分析系統，學有所出。

原來是直接用electron的，小哥說有現成的electron-vue不用重複造輪子(●˘ϖ˘●)，，嗯，，頗有道理，，，

目錄

技術棧

初始化項目：electron-vue

初始化項目：vue + electron

集成SQLite3

引入Less

配置Eslint

問題集錦

---

技術棧

前端：vue2 + webpack + es6+ + element-ui + less

數據庫：sqlite3 + sqlcipher

跨平臺框架：electron-vue

項目地址：https://github.com/m2o2o2d/stock.analysis

界面預覽：// 佔

初始化項目：electron-vue

1、用vue-cli + electron-vue初始化項目, vue init 需要全局安裝@vue/cli-init。

Preset：no sass/scss; axios + vue-electron + vue-router + eslint(standard); karma + mocha; spectron + mocha; electron-builder

$ vue init simulatedgreg/electron-vue stock.analysis

2、安裝dependencies，運行項目。

$ npm install
$ npm run dev

運行效果如下：

初始化項目：vue + electron

如果不用electron-vue的話，需要在vue項目中單獨引入electron。這裏用yarn做依賴版本鎖定，懶得改vue-cli的默認配置（手動捂臉。。），後續步驟以npm爲例。

1、通過Vue CLI（3.0）初始化vue項目。

$ vue create stock.analysis

2、進入項目根目錄，執行如下命令運行項目，訪問http://localhost:8080可看到vue歡迎界面。

$ yarn serve

3、安裝electron及相關包。（安裝失敗看這裏）

# 官方建議放在dev dependencies
$ yarn add electron --dev
# 打包工具
$ yarn add electron-builder --dev
# builder的依賴
$ yarn add electron-packager --dev

4、在項目根目錄下添加main.js文件，作爲主程序入口：

const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

let mainWindow; // 保有對窗口對象的全局引用。如果不這麼做，JS垃圾回收時窗口會自動關閉

function createWindow () {
    // 創建瀏覽器窗口
    mainWindow = new BrowserWindow({ width: 800, height: 600 });

    // 加載要展示的內容
    // 這裏用loadURL直接訪問項目地址，可以享受webpack的熱更新功能
    // 也可以用loadFile加載dist文件，無熱更新功能
    mainWindow.loadURL(`http://localhost:8080`);

    // 打開devTools
    mainWindow.webContents.openDevTools({
        detach: true
    });

    // 窗口關閉時觸發
    mainWindow.on('closed', function () {
        // 如果允許多個屏幕，可以把它存在Array裏。
        // 刪除的時候在這裏刪掉相應的元素
        mainWindow = null;
    });
};

// app初始化結束後調用createWindow，渲染瀏覽器窗口
app.on('ready', createWindow);

// 所有窗口關閉時退出app
app.on('window-all-closed', function () {
    // 對於OS X系統，除非用戶按下Cmd+Q，否則應用和它們的menu bar會保持運行
    if (process.platform !== 'darwin') {
        app.quit();
    }
});

app.on('activate', function () {
    if (mainWindow === null) {
        createWindow();
    }
});

5、配置package.json，添加“main”和“build”項，在“scripts”裏添加新的啓動命令：

electron-builder配置文檔：https://www.electron.build/configuration/configuration

{
  ...

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "start": "electron .", // 調試運行
    "pack": "electron-builder --dir", // 打包運行
    "dist": "electron-builder" // 打包
  },

  ...

  "main": "main.js",
  "build": {
    "appId": "stock.analysis",
    "compression": "normal",
    "nsis": {
      "oneClick": true,
      "perMachine": true,
      "runAfterFinish": true
    },
    "files": [ // 要打包進去的文件，資源+html+main.js
      "dist/css",
      "dist/img",
      "dist/js",
      "dist/*.html",
      "*.js"
    ]
  }
}

6、運行，創建瀏覽器窗口時是用loadURL訪問項目地址，所以啓動時需要先啓動項目，再啓動electron：

# 啓動項目
$ yarn serve
# 啓動electron加載項目
$ yarn start

如果是用loadFile加載打包生成的dist文件，直接啓動electron即可。

運行效果如下：

集成SQLite3

以下爲MacOs版本：

1、在電腦上安裝sqlite和sqlcipher，已裝可略。

$ brew install sqlite
$ brew install sqlcipher

2、安裝sqlite3。

$ npm install sqlite3 --build-from-source --sqlite_libname=sqlcipher --runtime=electron --target=4.0.4 --dist-url=https://npm.taobao.org/mirrors/atom-shell --sqlite=/usr/

引入Less

$ npm install --save-dev less
$ npm install --save-dev less-loader

配置Eslint

這裏採用單獨文件配置，其他配置方式看這裏。

.eslintrc.js

module.exports = {
	root: true,
	parser: 'babel-eslint',
	parserOptions: {
		sourceType: 'module'
	},
	env: {
		browser: true,
		node: true
	},
	extends: [
		'standard'
	],
	globals: {
		__static: true
	},
	plugins: [
		'html'
	],
	'rules': {
		'semi': [2, 'always'], // 強制語句分號結尾
		'indent': [2, 4], // 強制縮進4 spaces
		'no-new': [0], // 不允許new一個實例後不賦值或不比較
		'camelcase': [0, { 'properties': 'never' }], // 關閉駝峯命名規則
		'arrow-parens': 0, // allow paren-less arrow functions
		'generator-star-spacing': 0, // allow async-await
		'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0 // allow debugger during development
	}
}

.eslintignore

test/unit/coverage/**
test/unit/*.js
test/e2e/*.js
dist/*
node_modules/*
build/*

問題集錦

1、Uncaught Error: Cannot find module '/Users/carrie/Documents/Workspace/self/stock.analysis/node_modules/sqlite3/lib/binding/electron-v2.0-darwin-x64/node_sqlite3.node'

打開項目目錄node_modules/sqlite3/lib/binding，看是否有electron-vX.0-darwin-x64，一般是因爲X.0和v2.0版本號不匹配造成的。

安裝sqlite3時，--target指定了編譯的版本號4.0：

$ npm install sqlite3 --build-from-source --sqlite_libname=sqlcipher --runtime=electron --target=4.0.4 --dist-url=https://npm.taobao.org/mirrors/atom-shell --sqlite=/usr/

但是package.json裏引入的electron版本默認爲2.0，將其改爲4.0.4，重新安裝，即可。