[toc]

Lecture01-Vue 总览与开发准备

1、本节讲什么

先弄清楚"Vue 到底是个什么东西、帮你省了什么事"，再认识一个 Vite + Vue 工程长什么样（目录、入口、单文件组件）。这是进入 Vue 的第一课。

2、概念速览

什么是框架：把开发中反复出现的"套路代码"封装好，你只需填空 + 配置。框架着眼"通用"，你着眼"特定"。类比 Java 里的 Spring——框架管通用的，你填业务的。

什么是 Vue：一个"帮你管页面"的 JS 框架。核心就一句话：你声明"数据是什么、页面长什么样"，数据一变，页面自动跟着变（响应式），不用你手动操作 DOM。

正确 vs 误区：Vue 不是一个"模板语言"，而是一套"数据驱动视图"的完整方案。学它的重点不是背语法，而是**习惯"改数据、让 Vue 改页面"**这个思维。

3、先看效果

用 Vite 建的项目跑起来后，浏览器打开能看到一个带计数器按钮的页面。这就是"一个 Vue 应用在跑"。

4、照着做：认识一个 Vue 工程

① 项目目录长什么样（Vite 建的默认结构）

my-first-app/
├─ index.html          # 唯一的 HTML 入口，页面最终的"壳"
├─ package.json        # 依赖清单（npm 用，第 5 节讲过）
├─ vite.config.ts      # Vite 配置（第 27 节会用）
└─ src/
   ├─ main.ts          # 应用入口：创建 Vue 应用、挂载到页面
   ├─ App.vue          # 根组件：整个应用的第一块积木
   └─ components/      # 放各种小组件（后面自己建）

② 看 main.ts（应用怎么启动）

import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')   // 创建应用，挂载到 index.html 里的 #app 上

③ 看 App.vue（一个"单文件组件"长什么样）

<!-- 三块：template=长什么样、script=数据和逻辑、style=样式 -->
<template>
  <h1>Hello Vue!</h1>
</template>

<script setup lang="ts">
// script setup：组件的"逻辑区"，写变量和函数
const msg = '我是 Vue 页面'
</script>

<style scoped>
h1 { color: #42b883; }
</style>

④ 启动开发服务器

npm run dev

浏览器打开终端给的地址（通常 http://localhost:5173），看到页面。改 App.vue 保存，页面自动刷新——Vite 的热更新。

5、常见疑问

• Q：.vue 文件是什么？为什么长这样？ A：叫"单文件组件"。把一个组件的结构（template）、逻辑（script）、样式（style）放在一个文件里，好维护。以后你写的每个页面基本都是 .vue。
• Q：script setup lang="ts" 是干嘛的？ A：setup 是 Vue 3 的写法（组合式 API），lang="ts" 表示用 TypeScript（第 6 节学的类型检查在这里生效）。
• Q：<style scoped> 的 scoped 有什么用？ A：让这段样式只对当前组件生效，不会污染别的组件，这就是『高内聚、低耦合』理念的体现——这是可维护的关键（后面组件多了就懂）。
• Q：main.ts 和 App.vue 谁先谁后？ A：main.ts 是入口，它创建应用、把 App.vue 挂到页面。App.vue 是第一个组件，相当于"根"，其它组件都挂在它下面。

补充：将来新建 .vue 文件，快速生成骨架

新建一个 Xxx.vue 文件后它是空的，不必手敲骨架。在 VS Code 里两步搞定：

① 装两个扩展（扩展市场，Ctrl+Shift+X）

• Vue - Official（Vue 官方插件，也叫 Volar）：语法高亮、自动补全、类型检查。
• Vue VSCode Snippets：提供代码片段，敲前缀出骨架。

注意：要在**扩展市场（Extensions）**里搜并安装，别去 VS Code 的"Agent Customizations"面板搜——那是给 AI 助手配插件的（commands/skills/MCP servers），搜不到 Volar 这种普通扩展。

② 新建 .vue 文件后，输入 vue + Tab

自动生成三块骨架：

<template>
  <div></div>
</template>

<script setup lang="ts">

</script>

<style scoped>

</style>

然后你在 <script setup> 里写数据、模板里写页面、<style> 里写样式即可。

想用更贴合自己的骨架（比如默认带上 ref、onMounted），可以自定义"用户代码片段"：Ctrl+Shift+P → 搜 snippets → 选"配置用户代码片段 / vue.json"，配一个 vue3 前缀，之后输入 vue3 + Tab 就出你想要的模板。

6、规范要点

• 一个页面 = 一个 .vue 组件，别把多块页面塞进一个文件。
• 项目目录职责分清：components/ 放组件、views/ 放页面（后面实战用）、App.vue 当根布局。
• 从这节起，记住 Vue 的思维：后端提供数据、Axios收发数据、Vue用数据改页面——别再想着手动改 DOM。

7、本节验证

• 能说清 Vue 是“数据驱动视图”的框架，而不是一个模板语言 ✅
• 认识 Vite 工程目录：index.html、main.ts、App.vue 各是什么 ✅
• 看得懂 main.ts 的 createApp(App).mount('#app') 启动流程 ✅
• 知道 .vue 单文件组件由 template / script / style 三块组成 ✅
• 装好 Vue - Official 扩展，会用 vue + Tab 生成组件骨架 ✅