在当今的前端开发领域，工程化、模块化和高效开发体验已经成为主流。Vite 作为由 Vue 作者尤雨溪主导开发的新一代构建工具，凭借其极速的冷启动与热更新能力，迅速成为开发者的新宠。本文将基于你提供的代码结构和笔记内容，带你快速了解如何使用 Vite + Vue 3 + Vue Router 搭建一个标准的单页面应用（SPA）。
一、为什么选择 Vite？
Vite 是一个现代化的前端构建工具，它利用了浏览器原生支持的 ES 模块（ESM）特性，在开发阶段无需打包，直接按需加载模块，从而实现“秒开”的开发服务器。这带来了两个显著优势：
- 冷启动快：执行
npm run dev后，Vite 不会像 Webpack 那样先打包整个项目，而是直接启动开发服务器。 - 热更新快：当你修改某个组件时，Vite 只会重新加载受影响的模块，不会刷新整个页面，极大提升了开发效率。
此外，Vite 默认支持 TypeScript、CSS 预处理器、JSX 等现代前端技术，并且对 Vue 3 提供了开箱即用的支持。
二、项目初始化
使用 Vite 创建 Vue 3 项目非常简单，只需一条命令：
npm init vite@latest my-vue-app -- --template vue
该命令会生成一个标准的项目结构，其中关键目录如下：
my-vue-app/
├── src/
│ ├── main.js # 应用入口文件
│ ├── App.vue # 根组件
│ ├── views/ # 页面组件目录
│ └── style.css # 全局样式
├── index.html # HTML 入口（挂载点为 #app）
└── package.json
注意：Vite 会将
index.html作为首页启动，并在其中查找挂载点（如<div id="app"></div>），然后将 Vue 应用挂载到该节点上。
三、配置 Vue Router 实现多页面效果
虽然我们说的是“单页面应用”，但用户看到的却是多个“页面”。这是通过前端路由（Vue Router）来实现的。
1. 安装依赖
npm install vue-router
2. 创建路由配置文件
在 src/router/index.js 中定义路由规则：
import { createRouter, createMemoryHistory } 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: createMemoryHistory(),
// 路由配置数组
routes
})
export default router
3. 在主应用中启用路由
在 src/main.js 中引入并使用路由：
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
createApp(App)
.use(router)
.mount('#app')
通过 .use(router)，我们将 Vue Router 插件注册到应用中，使其全局可用。
四、页面组件与路由视图
1. 页面组件
我们在 src/views/ 目录下创建两个简单的页面组件：
Home.vue
<template>
<div>Home</div>
</template>
About.vue
<template>
<div>About</div>
</template>
2. 根组件 App.vue
在 App.vue 中，我们使用 router-link 和 router-view 来实现导航与内容切换：
<script setup>
</script>
<template>
<div>
<header>
<nav>
<ul>
<li><router-link to="/">Home</router-link></li>
<li><router-link to="/about">About</router-link></li>
</ul>
</nav>
</header>
<main>
<router-view></router-view>
</main>
<footer></footer>
</div>
</template>
<style scoped>
</style>
<router-link>是 Vue Router 提供的全局组件，用于生成带有路由跳转功能的链接。点击时不会刷新页面，仅更新 URL 并触发组件切换。<router-view>是一个占位符，用于动态渲染当前路由匹配的组件。
对比传统
<a href="/about">：后者会向服务器发起新请求并刷新整个页面，而前者是纯前端跳转，符合 SPA 的设计理念。
五、开发与构建流程
开发阶段
运行以下命令启动开发服务器：
npm run dev
Vite 会自动打开浏览器（通常是 http://localhost:5173），并监听文件变化。任何代码修改都会触发热更新，无需手动刷新。
生产构建
当项目完成开发后，执行：
npm run build
Vite 会将项目打包到 dist/ 目录，对 HTML、CSS、JavaScript 进行压缩和优化，生成可用于部署的静态资源。
六、开发体验增强工具
为了提升开发效率，推荐安装以下工具：
- Volar：Vue 官方 VS Code 插件，提供 Vue 3 的语法高亮、智能提示、类型检查等功能。
- Vue Devtools：Chrome 浏览器插件，可查看组件树、状态、路由等信息，方便调试。
七、总结
通过 Vite + Vue 3 + Vue Router 的组合，我们可以快速搭建一个结构清晰、开发体验优秀的单页面应用。整个流程体现了现代前端工程化的思想：
- 模块化：每个页面、组件独立封装；
- 响应式：Vue 3 的 Composition API 提供强大的状态管理能力；
- 路由驱动：通过前端路由实现“多页面”效果；
- 高效构建：Vite 提供极速的开发与构建体验。
虽然本文示例较为简单，但它构成了现代 Vue 应用的基础骨架。
希望这篇入门指南能帮助你更好地理解 Vue 3 项目的搭建逻辑，也欢迎你在稀土掘金分享你的学习心得！🚀
