創建項目

// 安裝vite
npm install vite// 創建名為vite-app的項目
npm create vite vite-app --template vue// 到項目目錄
cd vite-app// 安裝依賴
npm install// 運行項目
npm run dev// 打包
npm run build// 打包預覽
npm run serve

增加路由

// 安裝路由
npm add vue-router@4

router/index.js

import { createWebHashHistory, createRouter } from 'vue-router'const routes = [{path: '/',component: () => import("../pages/index.vue")},{path: '/HelloWorld',component: () => import("../pages/HelloWorld.vue")}
]const router = createRouter({history: createWebHashHistory(),routes,
})export default router

main.js

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router/index.js'createApp(App).use(router).mount('#app')

App.vue

<template><router-link to="/">index</router-link> |<router-link to="/HelloWorld">HelloWorld</router-link> <router-view></router-view>
</template>

index.vue

<template><div>這是首頁</div>
</template><script setup>import { ref, onMounted, onUnmounted } from 'vue'const num = ref(0)console.log(num.value)onMounted(() => {})onUnmounted(() => {})
</script><style lang='scss' scoped></style>

.