在前端開發中，我們有時會需要讀取本地文件目錄來獲取文件列表信息，這時我們可以使用Vue.js來完成這個需求。Vue.js是一款輕量級的JavaScript框架，它支持數據綁定、組件化等特性，在前端開發中得到廣泛應用。

首先，我們需要將需要讀取的文件目錄放置在項目的靜態文件夾中，例如：我們將文件目錄放置在項目目錄下的static文件夾中。

- project
- static
- files
- file1.txt
- file2.png
- file3.js

然后，我們需要使用Vue.js提供的組件來顯示讀取到的文件列表。Vue.js提供了v-for指令來循環遍歷數組或對象，我們可以利用這個指令來渲染我們讀取到的文件列表。

接下來，我們可以定義一個data數據，用來存放讀取到的文件列表。我們可以使用JavaScript中的XMLHttpRequest對象來讀取文件目錄，并將讀取到的文件列表數據存放在data數據中。

var app = new Vue({
el: '#app',
data: {
filesList: []
},
mounted() {
this.getFilesList()
},
methods: {
getFilesList() {
const xhr = new XMLHttpRequest()
xhr.onload = () =>{
const filesList = xhr.response.split(/\n/)
this.filesList = filesList.filter((item) =>!!item)
}
xhr.open('GET', './static/files')
xhr.send()
}
}
})

在上述代碼中，我們定義了一個Vue實例，并在mounted鉤子函數中調用getFilesList方法來讀取文件目錄。在getFilesList方法中，我們創建一個XMLHttpRequest對象，并在onload方法中讀取目錄信息，將讀取到的數據存放在filesList中，最后通過filter過濾掉空行，并將結果存回filesList。在調用XMLHttpRequest對象的open方法時，我們需要將參數設置為我們存放文件目錄的路徑，這里是'./static/files'。

最后，我們在HTML模板中使用v-for指令來遍歷filesList，將每個文件名以列表項的形式渲染出來。

<div id="app">
<ul>
<li v-for="fileName in filesList" :key="fileName">{{ fileName }}</li>
</ul>
</div>

通過上述步驟，我們即可通過Vue.js讀取文件目錄并將文件列表渲染到頁面中。同時，我們還可以在Vue實例中通過computed屬性來實時計算過濾、排序等操作。