electron-vue笔记1-项目初始化

脚手架

安装 vue-cli 和 脚手架样板代码

npm install -g vue-cli
vue init simulatedgreg/electron-vue my-project

安装依赖并运行你的程序

cd my-project
yarn # 或者 npm install
yarn run dev # 或者 npm run dev

electron-vue项目初始化process is not defined问题解决

解决办法是：
在.electron-vue/webpack.renderer.config.js和.electron-vue/webpack.web.config.js文件中找到HtmlWebpackPlugin代码段并更改为如下代码：

new HtmlWebpackPlugin({
     
      filename: 'index.html',
      template: path.resolve(__dirname, '../src/index.ejs'),
      // 添加内容-start
      templateParameters(compilation, assets, options) {
     
        return {
     
          compilation: compilation,
          webpack: compilation.getStats().toJson(),
          webpackConfig: compilation.options,
          htmlWebpackPlugin: {
     
            files: assets,
            options: options
          },
          process,
        };
      },
       // 添加内容-end
      minify: {
     
        collapseWhitespace: true,
        removeAttributeQuotes: true,
        removeComments: true
      },
      nodeModules: process.env.NODE_ENV !== 'production'
        ? path.resolve(__dirname, '../node_modules')
        : false
    }),

electron打包出现 Error: Unresolved node modules: vue

解决方式把node_modules 文件夹删除掉，使用npm install安装所有的模块，千万不要使用淘宝镜像安装！！！

或者使用 yarn安装模块，就可以避免这个错误

打包命令

"scripts": {
     
    "build": "node .electron-vue/build.js && electron-builder",
    "build:dir": "node .electron-vue/build.js && electron-builder --dir",
    "build:clean": "cross-env BUILD_TARGET=clean node .electron-vue/build.js",
    "build:web": "cross-env BUILD_TARGET=web node .electron-vue/build.js",
    "win32": "node .electron-vue/build.js && electron-builder --platform=win32  --arch=ia32",
    "dev": "node .electron-vue/dev-runner.js",
    "lint": "eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter src",
    "lint:fix": "eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter --fix src",
    "pack": "npm run pack:main && npm run pack:renderer",
    "pack:main": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.main.config.js",
    "pack:renderer": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.renderer.config.js",
    "postinstall": "npm run lint:fix"
  },

本地的数据库存储

yarn add nedb # 或 npm install nedb --save

设置 NeDB 并将其指向 userData 目录。这个空间专门为我们的应用程序所保留，所以，我们可以确信，其他程序 或 与其他用户的交互不应该篡改这个文件空间。至此，我们可以在 renderer 进程中导入 datastore.js 并使用它。
src/renderer/datastore.js

import Datastore from 'nedb'
import path from 'path'
import {
      remote } from 'electron'

export default new Datastore({
     
  autoload: true,
  filename: path.join(remote.app.getPath('userData'), '/data.db')
})

将其附加到 Vue 的 原型 (prototype) 上。通过在所有组件文件中使用 this.$db，我们现在可以访问数据存储的 API。
src/renderer/main.js

import db from './datastore'

/* 其它代码 */

Vue.prototype.$db = db

Nedb API

1.new Datastore()

new Datastore(options)
作用：

初始化一个数据存储，相当于MongoDB的一个集合、Mysql的一张表。

• options对象配置参数：

• ① filename(可选): 数据存储文件路径。如果为空，数据将会自动存储在内存中。注意路径不能以“~”结尾。

• ② inMemoryOnly(可选,默认false): 数据存储方式。是否只存在于内存中。

• ③ loadDatabase: 将数据加载到内存中。

• ④ timestampData(可选,默认false): 自动生成时间戳，字段为createdAt和updateAt，用来记录文档插入和更新操作的时间点。

• ⑤ autoload(可选,默认false): 如果使用autoload，当数据存储被创建时，数据将自动从文件中加载到内存，不必去调用loadDatabase。注意所有命令操作只有在数据加载完成后才会被执行。

• ⑥ onload(可选): 在数据加载完成后被调用，也就是在loadDatabase方法调用后触发。该方法有一个error参数，如果试用了autoload，而且没有定义该方法，在数据加载过程中出错将默认会抛出该错误。

• ⑦ afterSerialization(可选): 在数据被序列化成字符串之后和被写入磁盘前，可以使用该方法对数据进行转换。比如可以做一些数据加密工作。该方法入参为一个字符串(绝对不能含有字符“\n”，否则数据会丢失)，返回转换后的字符串。

• ⑧ beforeDeserialization(可选): 与afterSerialization相反。两个必须成对出现，否则会引起数据丢失，可以理解为一个加密解密的过程。

• ⑨ corruptAlertThreshold(可选): 默认10%,取值在0-1之间。如果数据文件损坏率超过这个百分比，NeDB将不会启动。取0，意味着不能容忍任何数据损坏；取1，意味着忽略数据损坏问题。

• ⑩ compareStrings(可选): compareStrings(a, b)比较两个字符串，返回-1、0或者1。如果被定义，将会覆盖默认的字符串比较方法，用来兼容默认方法不能比较非US字符的缺点。

注：如果使用本地存储，而且没有配置autoload参数，需要手动调用loadDatabase方法，所有操作(insert, find, update, remove)在该方法被调用前都不会执行。还有就是，如果loadDatabase失败，所有命令也将不会执行。

示例

// 示例 1: 内存数据库(没有必要调用loadDatabase方法)
var Datastore = require('nedb'),
    db = new Datastore();
 
 
// 示例 2: 本地存储需要手动调用loadDatabase方法
var Datastore = require('nedb'),
    db = new Datastore({
      filename: 'path/to/datafile' });
db.loadDatabase(function (err) {
         // 回调函数(可选)
  // Now commands will be executed
});
 
 
// 示例 3: 带有autoload配置项的本地存储
var Datastore = require('nedb'),
    db = new Datastore({
      filename: 'path/to/datafile', autoload: true });
// You can issue commands right away
 
 
// 示例 4: 创建多个数据存储
db = {
     };
db.users = new Datastore('path/to/users.db');
db.robots = new Datastore('path/to/robots.db');
 
// 如果不配置autoload，需要加载数据库(该方法是异步的)
db.users.loadDatabase();
db.robots.loadDatabase();

后续：https://www.w3cschool.cn/nedbintro/nedbintro-t9z327mh.html