1.安装并初始化electron-vue1.1全局安装vue/vue-clinpminstall@vue/cli-g#全局安装vue-cli脚手架1.2安装electron-vuevueinitsimulatedgreg/electron-vue项目名#生成electron-vue项目cd项目名称#进入项目根目录npminstall#安装依赖npmrundev#运行项目二、问题及解决方案2.1npmrundev时会提示processisnotdefined。解决方案参考：https://www.wubo.net.cn/development/electron_vue_init_fix.html在.electron-vue/webpack.renderer.config.js和.electron-vue/webpack.web.config.js文件中找到HtmlWebpackPlugin代码片段，并更改为以下代码：newHtmlWebpackPlugin({filename:'index.html',template:path.resolve(__dirname,'../src/index.ejs'),templateParameters(compilation,assets,options){返回{编译：编译，webpack：compilation.getStats（）.toJson（），webpackConfig：compilation.options，htmlWebpackPlugin：{files：assets，options：options}，process，};}，minify：{collapseWhitespace：true，removeAttributeQuotes:true,removeComments:true},nodeModules:process.env.NODE_ENV!=='production'?path.resolve(__dirname,'../node_modules'):false}),elementUI中的el形式在2.2中没有显示electron-table题参考文章：https://www.cnblogs.com/xiaoj...我们需要把e在.electron-vue/webpack.renderer.config.js文件中将element-ui加入白名单，将下面这句：letwhiteListedModules=['vue']改为：letwhiteListedModules=['vue','element-ui']然后运行项目，el-table表格就可以构建成功3.electronbuilder被打包成.dmg或.exe。-如果构建了Vue，选择在初始化时添加构建器依赖。3.2修改package.json文件的构建参数配置："build":{"appId":"com.electron.app","copyright":"Copyright***","productName":"Electron","files":["!dist/**/*"],"mac":{"icon":"build/icon.png",//应用图标"category":"public.app-category.productivity","artifactName":"${productName}_${version}.${ext}",//应用程序包名称"target":["dmg","zip"]},"win":{"icon":"build/icon.png","artifactName":"${productName}_${version}.${ext}","verifyUpdateCodeSignature":false,"target":[{"target":"nsis","arch":["ia32"]}]},"nsis":{"oneClick":false,//是否一键安装"createDesktopShortcut":"always",//是否添加桌面快捷方式"allowToChangeInstallationDirectory":true,//允许修改安装目录},"extends":null}重点修改mac和win选项。可以在build中适当增加nsis的配置，优化用户体验，比如是否允许用户一键安装，自定义安装位置，是否添加桌面快捷方式，安装完成后是否立即启动，配置安装图标等。更详细的参数配置请参考官方文档nsis配置。3.3脚本中的构建命令"electron":"electron.",//启动electron窗口"dist":"npmrunbuild&&electron-builder",//使用electron-builder打包，先生成静态资源包，再生成electron打包3.4执行命令打包npmrundist（npmrunbuild是项目静态资源打包生成的命令），生成dmg和exe执行文件，生成的执行文件在/build文件夹下。3.5指定打包平台注意：目前electron-builder背后没有指定平台和系统。打包时会参考当前操作系统的架构和平台进行打包。也就是说如果electron-builder运行在不同的操作系统上，结果会是一样的不同，mac下输入dmg，windows下生成exe，如果需要指定平台和系统架构，可以参考下面格式：（修改“build”：“scripts”下的选项：）electron-builder--platform--archplatform配置打包的平台安装文件：win系统：win32mac系统：darwinLinux系统：linuxarch指定了系统的架构，常见的如32位和64位操作系统：ia32：32位操作系统，也可以安装在64位操作系统中x64：64位操作系统，用这个打包体系结构无法安装在32位操作系统中。比如在windows下生成可执行文件exe，在package.json中的scripts中设置build命令如下："build":"node.electron-vue/build.js&&electron-builder--win--x64",3.6注意事项还有一点需要注意的是，在mac上不用签名也可以打包成功。您想更改电脑权限，但无法使用自动更新和发布到应用商店等功能。因此，必须在MAC包中加入代码签名。参考地址：code-signing3.7问题及解决办法（1）使用cnpminstall安装依赖时，打包时会出现各种未知问题。网上推荐使用yarn安装，但是测试安装速度很慢，所以改用临时淘宝源码安装，先删除node_modules文件夹，然后在项目终端下运行：npm--registryhttps://注册表.npm。taobao.orginstall重新打包后不再出现该问题。(2)electronbuilder打包时下载electron-v2.0.18-win-x64.zip等失败?electron-builder打包时会从github拉取相关资源。由于国内网络问题，只能离线下载安装。electron-v2.0.18-win-x64.zip包无法通过npm下载，只能通过其他方式离线下载，然后放入对应的缓存目录：win中目录为：C:\Users\AppData\Local\electron\Cachemac上的目录为：~/Library/Caches/electron/注意：mac上Finder窗口中使用快捷键：??+command+G调出“前往文件夹”选项进入所有系统文件相关下载地址：1.electron-v2.0.18-win32-x64下载地址，淘宝镜像：https://npm.taobao.org/mirrors/electron/2.nsis-3.0.3.2下载地址：https://github.com/electron-userland/electron-builder-binaries/releases/tag/nsis-3.0.3.24。Electron添加菜单和快捷键参考文章：https://blog.csdn.net/afr3828/article/details/79129863在主进程.src/main/index.js中添加：//设置菜单栏//设置快捷键实现复制粘贴等功能退出”，加速器：“Command+Q”，点击：function(){app.quit();}}]},{label:"Edit",submenu:[{label:"Undo",accelerator:"CommandOrControl+Z",selector:"undo:"},{label:"Redo",加速器:"Shift+CommandOrControl+Z",s选择器：“重做：”}，{类型：“分隔符”}，{标签：“剪切”，加速器：“CommandOrControl+X”，选择器：“剪切：”}，{标签：“复制”，加速器：“CommandOrControl+C",选择器:"复制:"},{标签:"粘贴",加速器:"CommandOrControl+V",选择器:"粘贴:"},{标签:"全选",加速器:"CommandOrControl+A",选择器:"selectAll:"}]}];同时，在createWindow()函数中添加functioncreateWindow(){}:Menu.setApplicationMenu(Menu.buildFromTemplate(template));//菜单栏快捷键设置5.Nedb的安装和使用5.1安装npminstallnedb--save5.2electron-vue中的使用参考文章：https://www.cnblogs.com/buzhiqianduan/p/7620099.html(1)new../db/datastore.jsimportDatastorefrom'nedb'importpathfrom'path'import{remote}from'electron'constdb={//创建三个数据库并自动加载//remote.app.getPath('userData')指向electron内部用户空间，也可以指定存储在任意位置tableData:newDatastore({filename:path.join(remote.app.getPath('userData'),'/tableData.db'),autoload:true}),chartData:newDatastore({filename:path.join(remote.app.getPath('userData'),'/chartData.db'),autoload:true}),cfgData:newDatastore({filename:path.join(remote.app.getPath('userData'),'/cfgData.db'),autoload:true}),}exportdefault{db}(2)importimportdbfrom'../db/datastore'injs;//引入nedbconstdataBase=db.db;(3)调用nedb数据库InsertOne(){//this.$db.chartData.loadDatabase();//如果数据库没有自动加载，需要在每次调用前手动加载数据库//向数据库dataBase.chartData中插入一条数据。insert({name:"tom"},(err,docs)=>{console.log(docs);//docs为返回值});},
