昨天成功引入了 button 元件的頁面 👍

回過頭來看看還有 12345…..好多個頁面要引入呀……
一個一個引入感覺有點麻煩…… (:3 」∠ )

可惜目前沒有像 components 一樣，有可以直接引入資料夾的方法 QQ

但我們可以借助 Node.js 檔案系統，抓取目錄下的檔案，再用 for 迴圈引入!

Step 1: 引入 fs

import fs from 'node:fs'

Step 2: 使用 fs.readdir 或是 fs.readdirSync 讀取資料夾下的內容，兩者的區別在於 readdir 是非同步的必須提供一個回傳函式，兩者皆會回傳查詢資料夾下的檔案，並用 array 包起來。

• fs.readdir

  // module.ts
  const files = fs.readdir(resolver.resolve('./runtime/pages/demo'), (err, files) => {
        if (err) {
          console.error(err)
          return
        }
        console.log(files)
      })
  
  // log 出來的內容
  [ 'button.vue',                                                                                                                                                                下午11:46:58
    'checkbox.vue',
    'id.vue',
    'input.vue',
    'radio.vue',
    'select.vue',
    'switch.vue',
    'tab.vue',
    'tooltip.vue' ]
  

• fs.readdirSync

  // module.ts
  const files = fs.readdirSync(resolver.resolve('./runtime/pages/demo'))
  
  extendPages((pages) => {
        console.log(files);
  }
  
  // log 出來的內容
  [ 'button.vue',                                                                                                                                                                下午11:46:58
    'checkbox.vue',
    'id.vue',
    'input.vue',
    'radio.vue',
    'select.vue',
    'switch.vue',
    'tab.vue',
    'tooltip.vue' ]
  

step 3: 成功讀到資料夾下內容後就可以嘗試引入 page 啦!

這邊要注意如果有設定 name 名稱的話，可以加上前綴字避免有重複名稱的可能性。

// module.ts
const files = fs.readdirSync(resolver.resolve('./runtime/pages/demo'))

extendPages((pages) => {
	pages.push({
        name: 'demo',
        file: resolver.resolve('./runtime/pages/demo.vue'),
        path: '/demo',
      })
	files.forEach((demoPage) => {
        pages.push({
          name: `demo-${demoPage}`.replace('.vue', ''),
          file: resolver.resolve(`./runtime/pages/demo/${demoPage}`),
          path: `/demo/${demoPage.replace('.vue', '')}`,
        })
      })
    })

step 4: 最後別忘了處理動態路由

files.forEach((demoPage) => {
        if (demoPage === '[id].vue') {
          pages.push({
            name: 'demo-id',
            file: resolver.resolve(`./runtime/pages/demo/${demoPage}`),
            path: `/demo/:id`,
          })
          return
        }
        pages.push({
          name: `demo-${demoPage}`.replace('.vue', ''),
          file: resolver.resolve(`./runtime/pages/demo/${demoPage}`),
          path: `/demo/${demoPage.replace('.vue', '')}`,
        })
      })

完成後打開 devtool 就可以看到引入的頁面嚕

Node.JS - 30 天入門學習筆記 - Node.js 檔案系統: https://ithelp.ithome.com.tw/articles/10185422