尤雨溪不只写了 Vue，还顺手造了个火箭——Vite。今天我们就来聊聊，如何用它三分钟搭起一个带路由的 Vue 3 多页面项目，顺便把“前端工程化”这词儿嚼出点人味儿。
💡 你还在 npm install 等到泡面都凉了？
曾几何时，前端开发 = “等构建”。Webpack 启动？先去泡杯咖啡；热更新卡顿？不如刷会儿短视频。
直到有一天，尤雨溪（Vue.js 作者）说：“够了！我要让开发者在冷启动时快得像开了氮气。”
于是，Vite 诞生了。
Vite（法语“快”）不是又一个打包工具，而是一场对“开发体验”的温柔革命。
🛠️ 一行命令，开启“秒开”时代
npm create vite@latest my-vue-app -- --template vue
或者更简洁：
npm init vite
然后一路回车，选 Vue + JavaScript（或 TypeScript），搞定！
这时候你已经拥有了一个结构清晰、配置合理、开箱即用的现代前端项目骨架。
不信？看看目录长啥样：
my-vue-app/
├── index.html ← 入口 HTML（注意！不是 public/index.html）
├── src/
│ ├── main.js ← 应用入口
│ ├── App.vue ← 根组件
│ ├── style.css ← 全局样式
│ └── components/ ← 组件放这儿
├── package.json
└── vite.config.js ← 配置文件（可选）
是不是清爽得像刚洗完脸？
🔥 为什么 Vite 快得离谱？
传统构建工具（比如 Webpack）启动时要先打包整个应用，再启动开发服务器——慢就慢在这“全量打包”。
而 Vite 聪明在哪？
它直接利用浏览器原生支持的 ES 模块（ESM） ，做到：
- ✅ 冷启动几乎瞬时：只解析当前页面需要的模块。
- ✅ 热更新（HMR）快如闪电：改一行代码，浏览器只更新那一小块，不刷新整个页面。
- ✅ 无需打包开发阶段：开发时按需加载，构建时才用 Rollup 打包优化。
就像你去图书馆借书，Webpack 是先把整座图书馆搬回家再找你要的那本；Vite 是直接告诉你：“第3排第2架，拿走就行。”
🧩 加个路由？三步搞定多页面！
单页面应用（SPA）当然好，但总不能所有功能都塞在一个 <div> 里吧？
这时候，vue-router 上场！
第一步：安装
npm install vue-router
第二步：新建页面（建议放 views/ 目录）
<!-- src/views/Home.vue -->
<template>
<div>🏠 欢迎回家！</div>
</template>
<!-- src/views/About.vue -->
<template>
<div>🙋 这是关于页，讲的是我有多懒（划掉）多高效。</div>
</template>
第三步：配置路由
// src/router/index.js
import { createRouter, createWebHashHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
const router = createRouter({
history: createWebHashHistory(), // 使用 # 路由（简单无后端依赖）
routes
})
export default router
第四步：在主应用中启用
// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import './style.css'
createApp(App)
.use(router) // 👈 关键！注入路由能力
.mount('#app')
第五步：在 App.vue 里放导航和占位符
<!-- src/App.vue -->
<template>
<header>
<nav>
<router-link to="/">首页</router-link> |
<router-link to="/about">关于</router-link>
</nav>
</header>
<main>
<router-view /> <!-- 页面内容在此切换 -->
</main>
</template>
💡
router-link和router-view是 vue-router 提供的全局组件，不用 import 就能用——魔法吗？不，是工程化！
🎨 开发体验拉满：不只是快
Vite 不仅快，还贴心：
-
自动打开浏览器：
npm run dev后，浏览器自己弹出来，连 Ctrl+点击都不用。 -
TypeScript / JSX / CSS 预处理器：开箱即用，无需额外配置。
-
VS Code 插件加持：
- Volar：Vue 3 官方智能提示插件（记得禁用 Vetur！）
- Vue Devtools：Chrome 插件，实时查看组件树、状态、事件——调试神器。
🤔 所以，“工程化”到底是什么？
很多人觉得“工程化”=“一堆配置+黑话”。
其实不然。
工程化 = 把重复、繁琐、易错的事交给工具，让人专注创造。
Vite 正是这样一位“贴心管家”：
- 你写
.vue文件，它负责编译； - 你改代码，它负责热更新；
- 你跑
build，它用 Rollup 输出极致优化的静态资源。
而你，只需要思考：用户看到什么？交互是否流畅？逻辑是否优雅？
🚀 结语：站在巨人的肩膀上写代码
从前端刀耕火种时代（手动拼 HTML + jQuery），到如今 npm init vite 三分钟搭起一个带路由、响应式、热更新的现代应用——我们真的太幸福了。
所以，别再被“工程化”吓退。
真正的工程化，是让你感觉不到它的存在，却处处受益于它。
下次当你输入 npm init vite 时，不妨对尤雨溪说声：
“谢谢，我的泡面终于能趁热吃了。”
