自動引入套件 / 組件 / 函式 / 路由設定筆記

unplugin-auto-import 自動引入函式/套件

安裝

npm install -D unplugin-auto-import

設定

// vite.config.js
import AutoImport from 'unplugin-auto-import/vite';

export default {
  plugins: [
    AutoImport({
      imports: [
        'vue',
        'vue-router',
        'vuex', // 如果有使用 Vuex
        {
          axios: [['default', 'axios']], // 自動引入 axios 為變數
        }
      ],
      dts: 'src/auto-imports.d.ts', // 自動產生 TypeScript 定義檔案，建議使用 .d.ts
    }),
  ]
}

🔸 dts 參數產出的定義檔有助於 VS Code 自動提示與類型檢查。即便是 JS 專案，產生 .d.ts 檔仍可提升開發體驗。

unplugin-vue-components 自動引入 Vue 組件

安裝

npm install -D unplugin-vue-components

設定

// vite.config.js
import Components from 'unplugin-vue-components/vite';

export default {
  plugins: [
    Components({
      dirs: ['src/components'], // 掃描指定資料夾中的元件
      extensions: ['vue'],      // 掃描哪些副檔名
      deep: true,               // 遞迴掃描子資料夾，預設為 true
      dts: 'src/auto-components.d.ts',
    }),
  ]
}

🔸 元件檔案名稱會自動轉換為 PascalCase（例如：my-button.vue → MyButton）。

🔸 dts 同樣建議輸出為 .d.ts 檔案，即使專案本身不是 TypeScript。

vite-plugin-pages / vite-plugin-vue-layouts 自動路由與佈局載入

安裝

npm install -D vite-plugin-pages vite-plugin-vue-layouts

設定

// vite.config.js
import Pages from 'vite-plugin-pages';
import Layouts from 'vite-plugin-vue-layouts';

export default {
  plugins: [
    Pages({
      dirs: 'src/pages',
      extensions: ['vue'],
    }),
    Layouts({
      layoutsDirs: 'src/layouts',
      defaultLayout: 'default',
    }),
  ]
}

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import { setupLayouts } from 'virtual:generated-layouts';
import generatedRoutes from 'virtual:generated-pages';

const routes = setupLayouts(generatedRoutes);

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

// src/main.js
import { createApp } from 'vue';
import App from '@/components/App.vue';
import router from '@/router';

const app = createApp(App);
app.use(router);
app.mount('#app');

預設目錄結構與使用方式

src/
├── layouts/
│   ├── default.vue         # 預設 Layout
│   └── admin.vue           # 自定義 Layout
├── pages/
│   ├── index.vue           # path: "/"，預設使用 default layout
│   └── admin.vue           # path: "/admin"，需指定使用 admin layout
├── users/
│   └── [id].vue            # path: "/users/:id"（動態路由）

指定 Layout 的方法

在頁面組件中透過 <script setup> 使用 definePageMeta 指定 Layout：

<!-- src/pages/admin.vue -->
<script setup>
definePageMeta({
  layout: 'admin'
});
</script>

<template>
  <h1>後台頁面</h1>
</template>

🔸 definePageMeta 是 vite-plugin-pages 的擴充功能。

🔸 若未指定，會自動使用 default.vue 作為 layout。

如需補充各套件的詳細功能與支援參數，建議參考對應官方文件：