Как зарегистрировать все Vue компонентов одновременно в laravel проекте?

Question

Я новичок, поэтому извините, если у меня возникли некоторые недоразумения.

У меня есть проект laravel, созданный laradock. Я хотел использовать Vue. js и его компоненты, и я отредактировал приложение. js.

app.js

window.Vue = require('vue');
Vue.component('my-comp', require('./components/my-comp.vue').default);

const app = new Vue({
    el: '#app',
});

, которое работает правильно. Рассматривая возможность добавления дополнительных компонентов в будущем, я заменил код следующим образом:

const allDirents = fs.readdirSync(dirPath, { withFileTypes: true });
const fileNames = allDirents.filter(dirent => dirent.isFile()).map(({ name }) => name);
fileNames.forEach(filename => {
    Vue.component(filename.replace('.vue', ''), require(dirPath + filename).default);
})

Но это не сработало. npm run dev возвращает сообщение «Скомпилировано успешно», но когда я открываю браузер, консоль браузера выводит такие сообщения:

Uncaught TypeError: fs.readdirSync is not a function
    at Module../resources/js/app.js (app.js:73618)

Не могу ли я использовать модуль файловой системы Node.js В laravel проект? Я просто хочу знать, как я могу получить все имена файлов в приложении. js в проекте. Я знаю, что будет go хорошо, если я зарегистрирую компоненты один за другим следующим образом:

Vue.component('my-comp1', require('./components/my-comp1.vue').default);
Vue.component('my-comp2', require('./components/my-comp2.vue').default);
...

Но я думаю, что это немного утомительно и не умно, поэтому я бы не стал.

У кого-нибудь есть идеи или решения?

спасибо.

Answer 1

Вы можете попробовать это в своем приложении. js:

import Vue from 'vue'
import exampleComponent from  './components/ExampleComponent.vue'
import booking  from './components/Booking.vue'
import inquiry from './components/Inquiry'

const app = new Vue({
    el: '#app',
    components:{
        exampleComponent,
        booking,
        inquiry
    }
});