昨天我們已經略懂整個網站大致怎麼組裝起來的
今天我們來略懂 http://localhost:8848/#/welcome 首頁是怎麼跑起來的

TLTR (Too Long to Read)

接續昨天的main檔案到跑出首頁需要閱讀這些檔案

• \pure-admin-thin\src\main.ts
• \pure-admin-thin\src\router\index.ts
• \pure-admin-thin\src\router\modules\remaining.ts
• \pure-admin-thin\src\router\modules\home.ts
• \pure-admin-thin\src\layout\index.vue
• \pure-admin-thin\src\views\welcome\index.vue

最後在layout\index.vue引用各種組件(components)

和一般簡單的路由有一大段差距

\router\index.ts

路由部分先知道有分兩種(動態和靜態)，動態是根據後端給予的角色權限渲染出來的，我們先關注靜態即可

靜態路由

我們直接找到createRouter (找東西先找create某某某)
發現有引用constantRoutes remainingRouter 把它組合在一起

往上找到引入

constantRoutes = homeRouter + errorRouter

至此我們知道原來index最後會把module資料夾內部的檔案全部組裝起來(黑貓師傅:混~合~在~一~起)!

\router\modules\home.ts

我們看看home檔案長什麼樣子

import { $t } from "/@/plugins/i18n";
import type { RouteConfigsTable } from "/#/index";
const Layout = () => import("/@/layout/index.vue");

const homeRouter: RouteConfigsTable = {
  path: "/",
  name: "Home",
  component: Layout,
  redirect: "/welcome",
  meta: {
    icon: "home-filled",
    title: $t("menus.hshome"),
    rank: 0
  },
  children: [
    {
      path: "/welcome",
      name: "Welcome",
      component: () => import("/@/views/welcome/index.vue"),
      meta: {
        title: $t("menus.hshome")
      }
    }
  ]
};

export default homeRouter;

終於看到簡單的部分了(前面真的很複雜!)
關注 component children 屬性

\layout\index.vue

先關注這邊引用了很多組件(components)即可

import navbar from "./components/navbar.vue";
import tag from "./components/tag/index.vue";
import appMain from "./components/appMain.vue";
import setting from "./components/setting/index.vue";
import Vertical from "./components/sidebar/vertical.vue";
import Horizontal from "./components/sidebar/horizontal.vue";

後面找一天再來介紹layout~

\views\welcome\index.vue

最終我們找到了首頁出現 Pure-Admin-Thin 的文字
有沒有覺得像是在走迷宮XD

這邊語法有點陌生 查了一下原來是使用套件的語法
套件名稱: unplugin-vue-define-options
https://github.com/sxzz/unplugin-vue-macros/blob/HEAD/packages/define-options/README-zh-CN.md

Element Plus中是用這個套件對components命名並進行註冊的

總結

今天我們略懂路由<router-view></router-view>是怎麼一層包一層最終渲染出首頁的

## 第三天
html->script引入
        ->main
            ->App.vue
            ->router
            ->store
            ->一堆套件

## 第四天
        ->main
            ->router
                ->index
                    ->\modules\remaining.ts
                    ->\modules\home.ts
                        ->\views\welcome\index.vue
                    ->\modules\error.ts

參考文章:
https://blog.csdn.net/zy21131437/article/details/124523320

https://book.vue.tw/CH4/4-1-vue-router-intro.html