Electron+Vue+SQLite3+SQLCipher项目初探

项目里要用Electron，研究方向是本地数据库/缓存相关，正好年终归账时发现excel效率太低，且分析维度有限，准备用Electron+Vue+SQLite3+SQLCipher搭一个简单版的交易分析系统，学有所出。

以学习研究为主，所以没有使用集成好的electron-vue，而是按需手动配置。

项目地址：// 占

界面预览：// 占

搭建Vue项目

1、通过Vue CLI（3.0）初始化vue项目。使用默认的Babel+ESLint的preset，使用yarn做依赖版本的锁定。

$ vue create stock.analysis

2、进入项目根目录，执行如下命令运行项目，访问http://localhost:8080可看到vue欢迎界面。

$ yarn serve

3、打包项目，在项目根目录会多出dist文件夹。

$ yarn build

引入Electron

1、安装electron及相关包。（安装失败看这里）

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

2、在项目根目录下添加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 });

    // 加载要展示的内容
    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();
    }
});

3、配置package.json，添加“main”和“build”项，在“scripts”里添加新的启动命令：

{
  ...

  "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"
    ]
  }
}

4、运行，创建浏览器窗口时是用loadURL访问项目地址，所以启动时需要先启动项目，再启动electron：

# 启动项目
$ yarn serve
# 启动electron加载项目
$ yarn start

如果是用loadFile加载打包生成的dist文件，直接启动electron即可。

运行效果如下：

Electron+Vue+SQLite3+SQLCipher项目初探

暂停，eslint不配好项目写起来好别扭啊。。。配个eslint先=。=

Electron+Vue+SQLite3+SQLCipher项目初探

搭建Vue项目

引入Electron

相关推荐