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，重新安装，即可。