第六章：用 Vite 从零搭一个 Vue Demo

前五章的理论，这一章全部落地。我们用 Vite 创建一个真正的 Vue 项目，跑起来，并搞懂每个文件的作用。

准备好终端，跟着敲。

6.1 创建项目

打开终端，进入你想放项目的文件夹，执行：

npm create vite@latest my-demo

这条命令的意思：用 npm 运行 Vite 官方的”创建项目”工具，项目名叫 my-demo。

回车后它会问你几个问题，用方向键选择：

✔ Select a framework: › Vue          ← 选 Vue
✔ Select a variant:   › JavaScript   ← 选 JavaScript（先不碰 TypeScript）

创建完，按提示三步走：

cd my-demo        # 进入项目文件夹
npm install       # 安装依赖（生成 node_modules）
npm run dev       # 启动开发服务器

终端会打印出一个网址：

  ➜  Local:   http://localhost:5173/

浏览器打开它，看到 Vite + Vue 的欢迎页面，就说明你的第一个工程化 Vue 项目跑起来了！

回顾一下：npm install 是第三章的装依赖，npm run dev 是第五章的 Vite 开发服务器。全都串上了。

6.2 目录结构讲解

用编辑器打开 my-demo 文件夹，你会看到大致这些内容。别慌，重点就几个：

my-demo/
├── node_modules/        ← 下载的依赖（不用管，巨大）
├── public/              ← 放静态资源（如图标），了解即可
├── src/                 ← 【核心】我们写代码的地方
│   ├── assets/          ← 图片、样式等资源
│   ├── components/      ← 存放各个组件
│   ├── App.vue          ← 根组件（页面从这里开始）
│   └── main.js          ← 程序入口（总开关）
├── index.html           ← 唯一的 HTML 入口
├── package.json         ← 项目说明书（第三章讲过）
└── vite.config.js       ← Vite 的配置文件

挑最关键的四个讲清楚：

① index.html — 唯一的入口 HTML

整个项目只有这一个 HTML 文件。打开它，核心就两行：

<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>

<div id="app"></div>：一个空div，整个 Vue 应用最后会被塞进这里
<script src="/src/main.js">：加载入口 JS 文件 main.js

这就是”单页应用（SPA）“名字的由来 —— 整个网站只有一个 HTML 页面。

② src/main.js — 程序的总开关

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

三行代码翻译成人话：

从 vue 包里导入 createApp（第四章的 import！）
导入我们的根组件 App.vue
创建 App 应用，把它挂载（mount）到 index.html 里那个 #app 的 div 上

③ src/App.vue — 根组件

这就是入门篇学过的单文件组件，页面内容从这里开始渲染。它内部还可以引入更多子组件（components/ 里的）。

④ vite.config.js — Vite 的配置

Vite 的设置都写这里。新手项目基本长这样，暂时不用改：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()]   // 启用对 .vue 文件的支持
})

@vitejs/plugin-vue 就是让 Vite “看懂 .vue 文件”的那个翻译插件（第五章说的翻译官，具体靠它）。

6.3 把它们串起来

现在把整条启动链路连起来，这是理解工程化项目的关键：

① 浏览器打开 index.html
        ↓
② index.html 加载 src/main.js
        ↓
③ main.js 导入 App.vue，并把它挂载到 <div id="app">
        ↓
④ App.vue 渲染出页面内容（还可继续引入子组件）
        ↓
⑤ 你在浏览器里看到了完整页面

一句话记住：index.html 是舞台，main.js 是导演，App.vue 是主演。

6.4 动手改一改

光跑起来不够，改两下才有感觉。保持 npm run dev 开着，把 src/App.vue 全部内容替换成下面这段：

<template>
  <div class="box">
    <h1>{{ title }}</h1>
    <p>你点击了 {{ count }} 次</p>
    <button @click="count++">点我 +1</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const title = ref('我的第一个 Vite + Vue 项目')
const count = ref(0)
</script>

<style scoped>
.box {
  text-align: center;
  margin-top: 100px;
  font-family: sans-serif;
}
button {
  padding: 8px 20px;
  font-size: 16px;
  cursor: pointer;
}
</style>

保存的一瞬间，注意看浏览器：不用刷新，页面直接就变了——这就是第五章说的热更新（HMR）。

再点几下按钮，数字实时增加——这是入门篇学过的响应式（ref）。

试着把 title 里的文字改一改，再保存，感受一下”改代码 → 秒生效”的开发体验。

6.5 小结

用 npm create vite@latest 项目名 创建项目，选 Vue + JavaScript
三板斧启动：cd 进目录 → npm install → npm run dev
核心文件就四个：
- index.html：唯一入口，里面有个空的 <div id="app">
- main.js：总开关，把 App.vue 挂载到那个 div 上
- App.vue：根组件，页面从这里开始
- vite.config.js：Vite 配置，新手不用动
启动链路：index.html（舞台）→ main.js（导演）→ App.vue（主演）
改代码保存，浏览器靠 HMR 热更新秒变

到这里，前端工程化的核心闭环你已经完全打通了！接下来的第七~十章，是给项目”添砖加瓦”的实用生态：路由、状态管理、请求、组件库。