vite + vue router + typescirpt

未完成，待整理!!!!

使用 Dockerfile 建立環境，在這邊 Dockerfile 非常單純，只是要建立 Node js 的環境

建立完成後，看一下 npm list , 啥也沒有

全域安裝 vue/cli 模組，幫助我們建立環境

完成之後，我們要來建立環境了

主要使用 vite + typescript

選 Vue

選 TypeScirpt

安裝 vue-router

為了測試 vue-router 新增

在 src 資料夾中，創建一個 router 目錄，並在其中創建一個 index.ts 檔案。這個檔案將包含路由設定。 src/router/index.ts：

import { createRouter, createWebHistory } from 'vue-router'

// 定義頁面組件
import Home from '../views/Home.vue'
import About from '../views/About.vue'

// 設定路由
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]

// 創建並導出路由實例
const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

在 src/main.ts 中，導入並使用 vue-router

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App)
  .use(router)  // 使用 vue-router
  .mount('#app')

src/views/Home.vue：

<template>
  <div>
    <h1>Home Page</h1>
    <router-link to="/about">Go to About Page</router-link>
  </div>
</template>

src/views/About.vue：

<template>
  <div>
    <h1>About Page</h1>
    <router-link to="/">Go to Home Page</router-link>
  </div>
</template>

在 App.vue 中設置

是 Vue Router 顯示對應頁面的地方。將它添加到 App.vue 中 ```vue ```