Динамически добавлять все компоненты в папку

Question

Итак, я сейчас создаю учебник, в котором количество страниц будет постоянно увеличиваться по мере добавления новых функций, в настоящее время я вручную добавляю каждый файл в отображаемый файл, т.е.

const Page0 = () => import("../../components/tutorial/Page0/index.vue");
const Page1 = () => import("../../components/tutorial/Page1/index.vue");

, но, очевидно, если это не очень хорошо обрабатывается, когда он становится действительно большим, т.е.

const Page0 = () => import("../../components/tutorial/Page0/index.vue");
...
const Page100 = () => import("../../components/tutorial/Page100/index.vue");

Итак, мне было интересно, есть ли способ узнать, пусть vue. js знает, что он должен получать все файлы / папки в определенной папке и отображать каждую из них как компонент с именем 'Page' + number.

Порядок имеет значение.

песочница с полным кодом здесь https://codesandbox.io/s/serene-curie-it7xo?file= / pages / tutorial / _страница vue: 102-247

Answer 1

используйте динамическую c загрузку тогда.

в вашем _page.vue

function mapComponents() {
  let components = {};
  for (let i = 0; i < 2; i++) { // 2 should be your pages amount
    components["Page" + i] = () =>
      import(`../../components/tutorial/Page${i}/index.vue`);
  }
  return components;
}
export default {
  components: mapComponents(),
  computed: {
    current() {
//.... other code

в вашем tutorial.vue

data() {
    return {
      pages: [...Array(2).keys()] // same here, 2 should be your pages amount
    };
  },

, возможно, просто используйте другую функцию чтобы получить размер страницы, но вы поняли:)

рабочий образец: https://codesandbox.io/s/clever-feynman-vgm93?file= / pages / tutorial. vue: 280-347