(vue-cli4)electron-vue项目选择文件对话框的坑

最近写的一个基于vue的项目需要打包成桌面应用程序，并且需要点击下载时选择文件夹进行保存，于是用了electron-vue来打包，然后就是各种坑了，我只说几个大坑

（electron和electron-vue使用方法应该是一样的）electron官网

1：安装electron-vue时的坑

因为electron-vue可以和写好的vue项目融合的很方便所以选择用它
安装的问题看了这篇文章后解决了一大半
点击查看

2：调用dialog的问题(一定要分清楚哪里是主进程和渲染进程)

//在主进程和渲染进程中都可以调用
//主进程
const dialog = require('electron').dialog
//or
//渲染进程
const { dialog } = require('electron').remote
//https://www.electronjs.org/docs/api/dialog（官方文档）

3：使用dialog.showOpenDialog的问题

//网上看的很多回调函数都是直接以参数传到showOpenDialog里的，我咋试都不行，人家明明返回的是个promise对象的嘛，我用.then()这样就行了
dialog.showOpenDialog({
   properties: ['openDirectory'], //设置选择文件的方式
}).then(({canceled,filePaths})=>{ //回调
   if(!canceled){ //判断选择文件时是否点击取消按钮
       let path = filePaths[0];
       console.log(path); //返回的文件夹路径
   }
});

4：element-ui表格无法显示的问题

请看这篇文章
点击查看

最后附一个小站地址:毒蘑菇配色