更新

Question

我有一个Vue.js + Electron应用程序（electron-vue boilerplate）

获取和显示目录文件夹和文件的最佳做法是什么？

基本上我希望它的行为类似于文件资源管理器（Windows）或Finder（Mac）。您打开一个文件夹，可以显示所有内容。

让我们说：

名为App.vue的主视图，里面有路由器。
open folder中有App.vue按钮。
我们还有FileExplorer.vue组件显示为App.vue

当我们点击FileExplorer.vue按钮时，如何让这个C:\test folder组件获取并显示目录open folder（在Windows上）的文件和文件夹在App.vue？

我知道我应该使用Node，但究竟如何呢？我该导入什么以及如何使用Vue使它们一起工作？

Github上的所有项目都太复杂了，以至于新手无法理解它们是如何工作的。例如this一个看起来非常简单，但是那里有如此多的代码，你甚至不知道从哪里开始

更新

我设法获取文件夹的内容：

<v-btn @click="readDirectory"></v-btn>

[...]

const fs = require('fs-extra')
export default {
  name: "FileExplorer",
  data () {
    return {
      dir:'C:/test',
      files:[],
      file:""
    }
  },
  methods: {
    readDirectory() {
      fs.readdir(this.dir, (err, dir) => {
      console.log(dir);
      for(let filePath of dir)
      console.log(filePath)
      this.files = dir
      })
    },
  }
}

我这样显示：

 <v-btn v-for="file in files" :key="file.id">
    {{file}}
 </v-btn>

但它并不像真正的文件浏览器那样......我按下按钮点击文件夹和文件，但我无法对所有这些文件夹和文件做任何事情。

如何使其获取的所有文件夹以相似的方式运行（获取其内容）？

如何以不同方式显示文件夹和文件？

Answer 1

如果您只是想让用户在Electron中选择一个文件夹，我建议使用showOpenDialog API。

在渲染器流程中，您需要使用remote API来访问dialog API。

const { remote } = require('electron')

remote.dialog.showOpenDialog({
  properties: ['openDirectory'],
  defaultPath: current
}, names => {
  console.log('selected directory:' + names[0]);
});

如果要在应用程序中显示目录的内容，则必须使用节点fs模块并读取目录内容。

fs.readdir(path[, options], callback)

将回调所有文件和目录路径，然后您必须迭代以获取更多信息或递归遍历以获取其内容。有一些节点模块使这个过程比你自己编写它更容易。

一旦您拥有包含所有文件和目录的对象树，就可以使用它来使用vue.js创建UI。

在Vue.js + Electron应用程序中获取和显示目录的所有文件夹和文件的好方法是什么？

更新

1 个答案: