Vue 快速上手

在创建了第一个 Vue 项目并了解了其基本结构之后，让我们通过修改代码来直观地感受一下 Vue 是如何工作的。我们将完成一个经典的“Hello, World!”示例，并了解 Vue 单文件组件的基本构成。

1. 启动你的开发服务器

首先，确保你的开发服务器正在运行。在你的项目根目录下，打开终端并执行：

bash

npm run dev

然后在浏览器中打开它提供的本地地址 (例如 http://localhost:5173)。你应该能看到 Vue 的默认欢迎页面。

2. 打开根组件 `App.vue`

现在，使用你的代码编辑器（推荐 VS Code）打开项目。找到并打开 src/App.vue 文件。这个文件是应用的根组件，你在浏览器中看到的内容就是由它渲染出来的。

一个典型的 .vue 单文件组件 (SFC) 由三个部分组成：

<template>: 定义组件的 HTML 结构。
<script setup>: 编写组件的 JavaScript/TypeScript 逻辑。在这里你可以定义数据、方法等。
<style>: 编写组件的 CSS 样式。

3. 修改模板内容

让我们来修改一下 <template> 部分。将 src/App.vue 文件里的内容完全替换成以下代码：

vue

<script setup>
// 这里是组件的逻辑部分
</script>

<template>
  <!-- 这里是组件的 HTML 结构 -->
  <header>
    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
  </header>

  <main>
    <h1>Hello, Vue!</h1>
    <h3>你已经成功运行了你的第一个 Vue 应用。</h3>
  </main>
</template>

<style scoped>
/* 这里是组件的样式 */
header {
  line-height: 1.5;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

main {
  text-align: center;
}
</style>

4. 查看热更新效果

当你保存 App.vue 文件后，你会发现浏览器中的页面自动刷新了，并显示出你刚刚修改的内容：“Hello, Vue!”。

这个功能叫做热模块替换 (Hot Module Replacement, HMR)，它由 Vite 提供支持。HMR 极大地提升了开发效率，因为它允许你在不刷新整个页面的情况下，实时看到代码的修改效果。

5. 添加响应式数据

现在，让我们在 <script setup> 中添加一些动态数据。

修改 src/App.vue 文件如下：

vue

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

// 使用 ref 创建一个响应式变量
const message = ref('欢迎来到 Vue 的世界！')
</script>

<template>
  <main>
    <h1>{{ message }}</h1>
    <input v-model="message" />
  </main>
</template>

<style scoped>
main {
  text-align: center;
  margin-top: 2rem;
}

input {
  margin-top: 1rem;
  padding: 8px;
  font-size: 1rem;
}
</style>

在这个版本中：

我们从 vue 中导入了 ref 函数。
使用 ref('...') 创建了一个响应式引用 message。这意味着当 message 的值改变时，Vue 会自动更新模板中所有使用到它的地方。
在模板中，我们使用双大括号来显示 message 的值。
我们添加了一个 <input> 元素，并使用 v-model="message" 将输入框的值与 message 变量双向绑定。

现在回到浏览器，你会看到 <h1> 显示了 “欢迎来到 Vue 的世界！”。尝试在输入框中输入一些新的文字，你会发现 <h1> 的内容会随着你的输入实时改变。

这就是 Vue 声明式渲染和响应式系统的魅力！你只需要关心你的数据（状态），而 Vue 会负责处理所有繁琐的 DOM 更新。

Vue 快速上手 ​

1. 启动你的开发服务器 ​

2. 打开根组件 App.vue ​

3. 修改模板内容 ​