在 Vite 创建的 Vue 项目中开发自定义页面，通常需要创建路由、组件和视图。以下是完整的开发流程：

 一、创建路由系统（使用 Vue Router）
1. 安装 Vue Router  

yarn add vue-router@4   Vue 3 使用 v4 版本

2. 创建路由配置文件  
   在 src 目录下创建 router/index.js：  

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

const routes = [
     {
       path: '/',
       name: 'Home',
       component: () => import('../views/Home.vue')  // 首页组件
     },
     {
       path: '/about',
       name: 'About',
       component: () => import('../views/About.vue')  // 关于页面组件
     }
]

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

export default router

3. 在主应用中挂载路由  
   修改 src/main.js：  

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'  // 引入路由

createApp(App)
     .use(router)  // 使用路由
     .mount('app')

二、创建页面组件
在 `src/views` 目录下创建页面组件（例如 `Home.vue` 和 `About.vue`）：

Home.vue

<template>
  <div class="home">
    <h1>首页</h1>
    <p>这是我的首页内容</p>
    <router-link to="/about">前往关于页面</router-link>
  </div>
</template>

<script setup>
// 页面逻辑
</script>

<style scoped>
/ 页面样式 /
</style>

About.vue

<template>
  <div class="about">
    <h1>关于我们</h1>
    <p>这是关于页面的内容</p>
    <router-link to="/">返回首页</router-link>
  </div>
</template>

<script setup>
// 页面逻辑
</script>

<style scoped>
/ 页面样式 /
</style>

 三、修改根组件 App.vue
确保 App.vue 包含路由出口（router-view）：  

<template>
  <div id="app">
    <!-- 导航栏 -->
    <nav>
      <router-link to="/">首页</router-link> |
      <router-link to="/about">关于</router-link>
    </nav>
    
    <!-- 路由出口：页面内容将在这里显示 -->
    <router-view />
  </div>
</template>

<style>
/ 全局样式 /
</style>

 四、开发嵌套路由（可选）
如果需要在页面内嵌套子路由（例如管理后台），可以这样配置：

1. 修改路由配置 router/index.js

const routes = [
     {
       path: '/admin',
       name: 'Admin',
       component: () => import('../views/Admin.vue'),
       children: [
         {
           path: 'dashboard',
           name: 'Dashboard',
           component: () => import('../views/admin/Dashboard.vue')
         },
         {
           path: 'settings',
           name: 'Settings',
           component: () => import('../views/admin/Settings.vue')
         }
       ]
     }
   ]

2. 创建父组件 Admin.vue

<template>
     <div class="admin">
       <h1>管理后台</h1>
       <nav>
         <router-link to="/admin/dashboard">仪表盘</router-link> |
         <router-link to="/admin/settings">设置</router-link>
       </nav>
       <router-view /> <!-- 子路由内容将在这里显示 -->
     </div>
   </template>

五、使用组件化开发
在页面中复用组件（例如按钮、表单）：

1. 创建组件  
   在 src/components 目录下创建 Button.vue：  

<template>
     <button class="custom-button" @click="handleClick">
       {{ label }}
     </button>
   </template>

   <script setup>
   const props = defineProps({
     label: {
       type: String,
       default: '点击我'
     }
   })

   const emit = defineEmits(['click'])

   const handleClick = () => {
     emit('click')
   }
   </script>

   <style scoped>
   .custom-button {
     padding: 8px 16px;
     background-color: 409eff;
     color: white;
     border: none;
     border-radius: 4px;
   }
   </style>

2. 在页面中使用组件  

<template>
     <div>
       <h1>首页</h1>
       <CustomButton label="自定义按钮" @click="doSomething" />
     </div>
   </template>

   <script setup>
   import CustomButton from '../components/Button.vue'

   const doSomething = () => {
     console.log('按钮被点击了')
   }
   </script>

 六、运行项目

yarn dev   #启动开发服务器

访问 `http://localhost:5173`，你应该能看到导航栏和首页内容，并可以通过链接切换到不同页面。

 总结
1. 创建路由系统：配置路径和组件映射。
2. 开发页面组件：在 views 目录下创建 Vue 组件。
3. 使用路由链接：通过 router-link 实现页面导航。
4. 组件化开发：将通用元素封装为组件复用。

这样你就可以基于 Vite + Vue 开发完整的单页应用了！如果需要更复杂的功能（如状态管理、API 请求），可以继续集成 Pinia、Vuex 或 Axios。