//Html
<div id="app">
  <ul>
    <li 
        v-for="(item,index,id) in menus"    
        :key="id"
        :class="menuActive == index ? 'isActive' : ''"
         @click="menuClickActive(index)"
        >
      {{ item.title }}
    </li>
  </ul>
</div>


//Style
var app = new Vue({
  el: '#app',
  data: {
   menus: [
      { id:'',title: '首頁' },
      { id:'',title: '關於我們' },
      { id:'',title: '聯絡我們' }
    ],
    menuActive:0,
  },
  methods: {
    menuClickActive : function (index) {
      const vm =this;
      vm.menuActive =index;
    }
  }
})
//Style
ul{
  display:flex;
  li{
    display:flex;
    margin:auto 10px;
    &.isActive{
      border-bottom:1px solid #333;
    }
  }
}

npm install swiper --save

import '@/assets/swiper-bundle.css';

<template>
<swiper  
:modules="modules"
        :slides-per-view="1"
        :space-between="50"
        :spaceBetween="30"
        :effect="'fade'"
        :loop="true"
        :autoplay="{ delay: 4000, disableOnInteraction: false }"
        
        @swiper="onSwiper"
        @slideChange="onSlideChange"
        :pagination="pagination"
        >
  <swiper-slide>Slide 1 
  
  </swiper-slide>
  <swiper-slide>Slide 2</swiper-slide>
  <template v-slot:container-start><span>Start</span></template>
  <template v-slot:container-end><span>End</span></template>
   <template v-slot:wrapper-start><span>One</span></template>
  <template v-slot:wrapper-end><span>Two</span></template>
</swiper>
</template>

<script setup lang="ts">
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Autoplay, Pagination, Navigation, Scrollbar }from 'swiper/modules'; 

    const modules = [Autoplay, Pagination, Navigation, Scrollbar];
    const pagination ={
          clickable: true,
          renderBullet: function (index:any, className:any) {
            return '<span class="' + className + '">' + (index + 1) + '</span>';
          },
        }
    const onSwiper = (swiper:any) => {
        console.log(swiper);
    };
    const onSlideChange = () => {
        console.log('slide change');
    };
</script>

import axios, { InternalAxiosRequestConfig, AxiosResponse } from 'axios'
import {storeToRefs} from 'pinia';
import { useVerifyFormStore } from '../stores/verify';
//創建Axios_service
const service = axios.create({
  baseURL: import.meta.env.VITE_API_URL,
  timeout: 50000,
  headers: { 'Content-Type': 'application/json;charset=utf-8' }
})

// 请求攔截
service.interceptors.request.use((config: any) => {
   const storeVerify = useVerifyFormStore();
 const { token } = storeToRefs(storeVerify);
  if (token.value.trim()) {
    config.headers.Authorization = token.value;
    console.log(config.headers.Authorization)
  }
  return config
}, error => {
  return Promise.reject(error)
})

// 響應攔截
service.interceptors.response.use((response:any) =>{
 // const { code, msg } = response.data;
  if (response.status === 200) {
      console.log(response)
      return response;
  }
  // console.log(code)
  // return Promise.reject(new Error(msg || 'Error'));
},
  error => {
   if(error.response&&error.response.status){
     const status = error.response.status
      switch (status) {
          case 400:
              alert('请求錯誤');
              break;
          case 401:
              alert('请求錯誤');
              break;
          case 404:
              alert('请求錯誤地址出錯');
              break;
          case 408:
              alert('请求超時');
              break;
          case 500:
             alert('服務器內部錯誤');
              break;
          case 501:
              alert('服務沒實現');
              break;
          case 502:
              alert('網路錯誤');
              break;
          case 503:
                alert('網路不可用');
              break;
          case 504:
              alert('網頁超時');
              break;
          case 505:
        
            alert('HTTP版本不受支持');
              break;
          default:
               alert('請求失敗');
      }
        return Promise.reject(error);
       }
    return Promise.reject(error);
})
export default service;

import instance from "./service.ts"

const axios = ({method,url,data,config}) => {
    method = method.toLowerCase();
    if (method == 'post') {
        return instance.post(url, data, {...config})
    } else if (method == 'get') {
        return instance.get(url, {
            params: data,
            ...config
        })
    } else if (method == 'delete') {
        return instance.delete(url, {
            params: data,
            ...config
        }, )
    } else if (method == 'put') {
        return instance.put(url, data,{...config})
    } else {
        console.error('未知的method' + method)
        return false
    }
}
export default axios

import axios from '../axios/request'


interface formType{
    email?:string | null | undefined,
    password?:string | null | undefined,
    checkpassword?:string | null | undefined,
}

export const Login = (data:formType) => {
    return axios({
        url: import.meta.env.VITE_API_URL + '/auth/login',
        method: 'post',
        data,
        config: {
            timeout: 10000
        }
    })
}

import axios from '../axios/request'

// 出勤設定
export const getSetCheckModesApi = (data:object) => {
    return axios({
        url: import.meta.env.VITE_API_URL + '/api/setCheckModes',
        method: "get",
        data,
        config: {
            timeout: 10000
        }
    })
}

export const getSetCheckModeApi = (_id:string,data:object) => {
    return axios({
        url: import.meta.env.VITE_API_URL + '/api/setCheckModes/'+`${_id}`,
        method: "get",
        data,
        config: {
            timeout: 10000
        }
    })
}
export const addSetCheckModeApi = (data:object) => {
    return axios({
        url: import.meta.env.VITE_API_URL + '/api/setCheckMode',
        method: "post",
        data,
        config: {
            timeout: 10000
        }
    })
}
export const editSetCheckModeApi = (_id:string,data:object) => {
    return axios({
        url: import.meta.env.VITE_API_URL + '/api/setCheckModes/'+`${_id}`,
        method: "put",
        data,
        config: {
            timeout: 10000
        }
    })
}
export const removeSetCheckModeApi = (_id:string,data:object) => {
    return axios({
        url: import.meta.env.VITE_API_URL + '/api/setCheckModes/'+`${_id}`,
        method: "delete",
        data,
        config: {
            timeout: 10000
        }
    })
}

npm create vite@5

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

import { Router,createRouter, createWebHistory } from 'vue-router'
import { setupLayouts } from 'virtual:generated-layouts'
import generatedRoutes from 'virtual:generated-pages'
const options= {
  history: createWebHistory(),
  routes: setupLayouts(generatedRoutes)
}
const router: Router = createRouter(options);
export default router

import { Router,createRouter, createMemoryHistory } from 'vue-router'
import { setupLayouts } from 'virtual:generated-layouts'
import generatedRoutes from 'virtual:generated-pages'
const options= {
  history: createMemoryHistory(),
  routes: setupLayouts(generatedRoutes)
}
const router: Router = createRouter(options);
export default router

"types": [
  "vite-plugin-pages/client",
  "vite-plugin-vue-layouts/client"
]

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ESNext", "DOM"],
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "node",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",

    /* Linting */
    "strict": true,
    "noUnusedLocals": false,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "types": [
      "vite-plugin-pages/client",
      "vite-plugin-vue-layouts/client"
    ]
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

import { createApp } from 'vue'

import App from './App.vue'
+ import router from "./router/router"


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

import { createSSRApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
const pinia = createPinia()
+ import router from "./router/router.ts"

export function createApp() {
  const app = createSSRApp(App);
    app.use(pinia)
+     app.use(router);
    return { app }
}

+ import Pages from 'vite-plugin-pages'
+ import Layouts from 'vite-plugin-vue-layouts'
export default defineConfig({
    plugins: [
        vue(),
+         Pages({
+             dirs: [
+                 { dir: 'src/views/frontdesk/', baseRoute: '/' },//前台
+                // { dir: 'src/views/admin/', baseRoute: 'admin' },
+             ]
+         }),
+         Layouts(),
    ]
})

<template>
<main class="main">
    <router-view></router-view>
</main>
</template>

<route lang="yaml">
    path: "/",
    redirect: "/frontdesk/index",
    meta:
      layout: frontLayout
</route>

<route lang="yaml">
    meta:
      layout: frontLayout
</route>

//frontLayout.vue
<template>
<Nav :navLists="navLists" ></Nav>
<router-view />
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import Nav from '../components/Nav.vue'
interface navListType {
    id?: number,
    name?: string,
    href?: string,
}
const navLists = ref<navListType[]>([
    { id: 0, name: '首頁', href: '/' },
    { id: 2, name: '關於', href: '/about' },
])
</script>

<template>
<router-view></router-view>
</template>

<script setup lang="ts">
</script>

//這個檔案要注意別命名錯誤[...all].vue
<template>
    <main class="flex flex-col items-center space-y-3">
      <span class="text-2xl">
        404
      </span>
      <router-link class="text-xl border p-1" to="/">回首頁</router-link>
    </main>
</template>
  
 <route lang="yaml">
  meta:
    layout: Layout404
  </route> 
  

<template>
    <div>
      {{title}}
    </div>
</template>

<route>
{
    path: '/user/:id',
    name: 'User',
    meta: {
        layout: 'frontLayout', 
    }
}
</route>

<script setup lang="ts">
import {ref,onMounted} from 'vue'
import { useRoute, useRouter } from 'vue-router';
  const route = useRoute();
  const router = useRouter()
      const title =ref<string>('ID');
  onMounted(() => {
      const id = route.params.id;
      console.log('讀取動態參數id',id)
  })
</script>

<route>
{
    path: '/user/:userId',
    name: 'User',
    meta: {
        layout: 'frontLayout', 
    }
}
</route>

<router-link :to="{ name: 'User', params: { userId: 'erina' }}">
  User
</router-link>

router.push({ name: 'user', params: { userId: 'erina' } })

<route>
{
    path: '/user/:userId',
    name: 'User',
    redirect: '/' 
    //redirect: { name: 'homepage' } 
    meta: {
        layout: 'frontLayout', 
    }
}
</route>

vercel.json
{
    "rewrites": [
        {"source": "/(.*)", "destination": "/"}
    ]
}

// 建立目標對象
const person1 = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

// 建立來源物件
const person2 = {firstName: "Anne",lastName: "Smith"};

// 將來源分配給目標
Object.assign(person1, person2);
console.log(person1)
// 顯示目標
let text = Object.entries(person1);

document.getElementById("demo").innerHTML = text;

//父元件
<template>
    <my-component>
      <p>Slot爸爸</p>
    </my-component>
</template>

//子元件
<template>
<div>
    <slot></slot>
</div>
</template>

<template>
<!--點擊打開Dialog跳出框-->
 <el-button @click="showDialog = true"  type="primary">導出Excel</el-button>
 <!--父組件 showDialogt父傳給子，@update:showDialog="showDialog = $event" -->
<Dialog 
        :showDialog="showDialog" @update:showDialog="showDialog = $event"/>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue';
const showDialog = ref(false);

</script>

<template>
 <!--子組件  :model-value="showDialog"   @update:model-value="$emit('update:showDialog', $event)"-->
     <el-dialog
        :model-value="showDialog"
        @update:model-value="$emit('update:showDialog', $event)"
        title="Notice"
        width="30%"
        destroy-on-close
        center
      >
        <span>
          Notice: before dialog gets opened for the first time this node and the one
          bellow will not be rendered
        </span>
        <div>
          <strong>Extra content (Not rendered)</strong>
        </div>
        <template #footer>
          <span class="dialog-footer">
          <!----試過這個方式可以註解Ａ-->
            <el-button @click="cancel">Cancel</el-button>
            <el-button type="primary" @click="update">
              Confirm
            </el-button>
          </span>
        </template>
      </el-dialog>
</template>


<script setup lang="ts">
import { ref, watch } from "vue";
interface showDialogType {
  readonly showDialog: boolean;
}
const props: showDialogType = defineProps({
  showDialog: {
    type: Boolean,
    default: false,
  },
})

// 設定子組件關閉Dialog
let localShowDialog = ref(props.showDialog);
//監控
watch(() => props.showDialog, (newVal:boolean) => {
  console.log('newVal',newVal)
  localShowDialog.value = newVal;
})
// 子對父傳值 
const emits = defineEmits(['update:showDialog']);
const update = () => {
  emits('update:showDialog', false)
}
const cancel = () => {
  localShowDialog.value = false;
  emits('update:showDialog', false)
}
</script>