初识Vue3与开发环境搭建

初识Vue3与开发环境搭建

• 理解 Vue3 的核心特点，能区分 Options API 与 Composition API
• 独立使用 Vite 创建、运行 Vue3 项目
• 看懂项目目录和单文件组件（SFC），改造出自己的第一个页面

---

1. 环境准备

工具	版本要求	作用
Node.js	≥20.19（推荐 22 LTS）	提供 JavaScript 运行环境，驱动 Vite
npm	随 Node 自带（≥10）	包管理器，下载依赖
VS Code	最新版	代码编辑器
Vue - Official 插件	-	让编辑器识别 .vue 文件，提供语法高亮

安装 Node.js 后务必重开终端，验证环境：

node -v   # 应输出 v20.19.0 或更高
npm -v    # 应输出 10.x 或更高

（国内推荐）配置镜像源，加速下载：

npm config set registry https://registry.npmmirror.com

---

2. Vue3 是什么？

一句话定义 ：Vue 是一个用于构建用户界面 的 JavaScript 框架。

• 框架：不是零散工具，而是一套有规矩的完整方案（数据管理、页面更新、组件化都有约定）。
• 渐进式：可以只在老页面里嵌入一个小组件（如天气卡片），也可以从零搭建完整后台系统。

核心特点（先混脸熟，后续课程深入）：

• 响应式：数据一变，页面自动更新（类似 Excel 公式重算）
• 组件化：页面拆成可复用的积木块
• 指令系统 ：v- 开头的属性控制 DOM（如 v-if、v-for）
• 生态成熟：路由、状态管理、组件库（Element-Plus）等一应俱全

---

3. 两种 API 写法：Options vs Composition

Vue3 有两种组织代码的方式，功能完全等价，只是代码的摆放方式不同。

Options API（选项式）

export default {
  data() { return { count: 0 } },    // 数据放 data 格子
  methods: { add() { this.count++ } } // 方法放 methods 格子
}

• 特点：按类型分格子（data / methods / computed ...）
• 适用：简单组件，上手快；老项目大量使用

Composition API（组合式）

import { ref } from 'vue'
const count = ref(0)          // 数据
function add() { count.value++ } // 方法（与数据写在一起）

• 特点：一个功能的数据 + 逻辑聚合在一起
• 优势：根组件不再臃肿，逻辑复用干净，TypeScript 支持更好
• Vue3 官方推荐 ，本课程全程使用该写法 + <script setup> 语法糖

💡 生活类比 ：

Options API 像"衣柜"------所有衣服挂一个柜子，所有书放另一个柜子；

Composition API 像"收纳箱"------跑步的鞋、衣、毛巾放一个箱子，钓鱼的装备放另一个箱子。

找东西时直奔对应箱子即可，不用跨格子翻找。

---

4. 使用 Vite 创建项目

Vite 是 Vue 官方的开发 + 构建工具，负责启动开发服务器、编译源码、打包上线。

创建一条龙命令：

# 1. 创建项目（在希望存放项目的目录执行）
npm create vue@latest

# 2. 交互选择（方向键 + 回车）
#    Project name: my-first-vue
#    Add TypeScript? No
#    Add Vue Router? No 
#    Add Pinia? No        
#    其他全部选 No

# 3. 进入项目并安装依赖
cd my-first-vue
npm install

# 4. 启动开发服务器
npm run dev

浏览器访问 http://localhost:5173/ 看到 Vue 欢迎页即成功。

注意：终端窗口不能关 ，关闭即停止服务；修改代码保存后页面自动更新（这叫 HMR 热更新）。

---

5. 项目目录结构（重点看标注）

my-first-vue/
├── node_modules/      # 📦 第三方依赖（自动生成，永远别手动改）
├── public/            # 📁 静态资源（原样拷贝到最终站点）
├── src/               # 💻 源码目录（90% 的时间都在这里）
│   ├── assets/        # 资源文件（图片、全局样式等）
│   ├── components/    # 可复用组件（第7课开始使用）
│   ├── App.vue        # ⭐ 根组件（总页面大壳子）
│   └── main.js        # ⭐ 入口文件（应用启动的第一行代码）
├── index.html         # 🚪 HTML 入口（里面有 <div id="app"></div>）
├── package.json       # 📋 项目信息 + 依赖清单 + 脚本命令
└── vite.config.js     # ⚙️ Vite 配置（本课不修改）

入口主线（必须理解）：

1. index.html 里有个空壳 <div id="app"></div>
2. main.js 创建 Vue 应用，把根组件 App.vue 挂载到这个壳上
3. 因此 App.vue 里的内容最终会显示在页面中

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import './assets/main.css'

createApp(App).mount('#app')   // 把 App 组件注入 #app 容器

---

6. 单文件组件（SFC）：一个 .vue 文件搞定一切

一个 .vue 文件就是一个组件，结构、逻辑、样式写在一起。

<script setup>
// ② 大脑：数据 + 逻辑（Composition API 简写形式）
import { ref } from 'vue'
const message = ref('Hello Vue3!')
</script>

<template>
  <!-- ① 骨架：页面结构（类似 HTML） -->
  <h1>{{ message }}</h1>
</template>

<style scoped>
/* ③ 皮肤：样式，scoped 表示只对当前组件有效 */
h1 { color: #4f46e5; }
</style>

三件套职责：

区块	作用	类比
<template>	写结构，支持 {``{ }}、v-for 等	骨架 / 平面图
<script setup>	写数据、方法、生命周期等	大脑 / 电路图
<style scoped>	组件私有样式（不影响其他组件）	皮肤 / 色卡

三个第一次见的语法（本课先用起来，后续详解）：

• {``{ name }} 插值表达式：把数据渲染到页面上
• const x = ref('初始值') 声明响应式数据：数据变了界面自动更新
• v-for="item in list" 列表渲染 / @click="fn" 事件绑定

---

7. 实战：改造第一个页面------个人名片

目标

把默认欢迎页改成一张"个人名片"卡片：显示姓名、职位、技能标签，点击按钮弹出问候。

操作步骤

1. 删除 src/components/HelloWorld.vue（默认示例文件）
2. 清空 src/App.vue 原有内容，粘贴以下完整代码：

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

const name = ref('张小明')
const job = ref('前端开发工程师')
const skills = ref(['Vue3', 'JavaScript', 'CSS', 'HTML'])

function sayHello() {
  alert('你好！我是' + name.value + '，很高兴认识你！')
}
</script>

<template>
  <div class="card">
    <h1>{{ name }}</h1>
    <p class="job">{{ job }}</p>
    <ul>
      <li v-for="skill in skills" :key="skill">{{ skill }}</li>
    </ul>
    <button @click="sayHello">打个招呼</button>
  </div>
</template>

<style scoped>
.card {
  max-width: 360px;
  margin: 100px auto;
  padding: 32px;
  text-align: center;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
h1 { margin: 0 0 8px; font-size: 24px; color: #333; }
.job { margin: 0 0 16px; color: #888; }
ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; list-style: none; padding: 0; }
li { padding: 4px 12px; font-size: 14px; color: #4f46e5; background: #eef2ff; border-radius: 999px; }
button { margin-top: 16px; padding: 8px 24px; font-size: 14px; color: #fff; background: #4f46e5; border: none; border-radius: 8px; cursor: pointer; }
button:hover { background: #4338ca; }
</style>

3. 保存文件，浏览器会自动刷新显示名片页。修改 name 等信息，页面同步变化。

检查清单

• 卡片居中、白底、圆角、阴影
• 姓名、职位正确显示
• 技能标签排成一行（圆角小块）
• 点击「打个招呼」弹出正确问候语
• 修改代码保存后，页面无需手动刷新即可更新

遇到问题？

• 先看终端：红色报错会指出哪个文件哪一行有问题
• 再看浏览器控制台（F12 → Console）：查看运行时错误
• 常见原因：标签未闭合、单词拼错、属性名写错（如 @click 写成 @clik）

---

8. 命令速查

# 创建项目
npm create vue@latest

# 进入目录并安装依赖
cd my-first-vue && npm install

# 启动开发服务
npm run dev
# → 访问 http://localhost:5173

---

📌 核心总结

• Vue3 = 构建 UI 的框架，响应式 + 组件化 + 指令 + 生态
• 两种 API：Options 按类型分格；Composition 按功能聚合（官方推荐）
• Vite：秒级启动，热更新无需刷新浏览器
• SFC ：.vue 文件 = <template> + <script setup> + <style scoped>
• 第一个页面 ：已经用上了插值 {``{ }}、ref 数据、v-for 循环、@click 事件------这些就是 Vue 开发的日常