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
- Electron开发实战之记账软件2——使用electron-vue初始化项目并升级部分包
- vue学习笔记-----vue+webpack初始化项目(vue1.0的安装)
- vue项目的初始化
- 【VUE学习笔记1】Vue.js项目结构说明
- vue脚手架初始化项目中配置文件webpack.base.conf.js代码含义
- vue项目初始化
- vue-cli 初始化一个项目后里面的文件的一些说明!
- 使用electron将vue-cli项目打包成exe的方法
- 初始化一个vue+node的项目
- ant笔记-6.项目构建之清理,初始化,编译
- 项目笔记整理04-vue-cli4.0移动端适配*3
- Vue学习笔记之vue-cli项目搭建及解析
- vue脚手架初始化项目中配置文件webpack.prod.conf.js代码含义
- 【音乐App】—— Vue-music 项目学习笔记:歌单及排行榜开发
- 用vue-cli3+Electron开发一个跨平台的桌面应用(这里只是搭建了项目)
- vue项目实战总结笔记
- vue-cli初始化项目中使用less的方法
- VUE-CLI初始化项目
- swift笔记之新项目中navigationController的创建和初始化
- 初始化vue项目,报错This is probably not a problem with npm,there is likely additional logging output above