Vue 3 从 0 到 1：环境搭建、HelloWorld 与核心概念初识

熊猫片沃子
76 阅读6分钟

Vue 3 作为目前最流行的前端框架之一，相比 Vue 2 带来了更强大的性能、更灵活的组合式 API 以及更好的 TypeScript 支持。下面我将从 0 开始，完成 Vue 3 开发环境搭建，编写第一个 HelloWorld 程序，初步认识 Vue 3 的核心概念，为后续学习打下基础。

一、开发环境准备

在开始 Vue 3 开发前，需要确保你的电脑已安装以下工具：

1. 必备工具

  • Node.js：Vue 项目依赖 Node.js 环境（推荐安装 v16+ 版本），包含 npm（包管理工具）

    • 下载地址：nodejs.org/
    • 验证安装：node -v 和 npm -v 命令能显示版本号即安装成功

  • 代码编辑器：推荐使用 VS Code，配合 Vue 相关插件提升开发效率

    • 下载地址：code.visualstudio.com/

    • 推荐插件：

      • Volar（Vue 3 官方推荐的代码高亮、语法提示插件）
      • Vue 3 Snippets（提供常用 Vue 语法片段）
      • ESLint（代码规范检查）

二、创建第一个 Vue 3 项目

Vue 官方推荐使用 Vite 作为构建工具（替代 Vue 2 常用的 Webpack），因为 Vite 提供了更快的开发启动速度和热更新体验。

1. 基于 Vite 创建项目

打开终端（命令提示符 / 终端 / PowerShell），执行以下命令：

# 创建项目（选择 Vue 模板）
npm create vite@latest my-first-vue3-app -- --template vue

# 进入项目目录
cd my-first-vue3-app

# 安装依赖
npm install

# 启动开发服务器
npm run dev

执行过程中会出现交互式选项，按如下选择即可：

  • Project name：直接回车（使用默认名称）或自定义
  • Select a framework：选择 Vue
  • Select a variant：选择 JavaScript（新手推荐）或 TypeScript

2. 项目目录结构解析

成功创建后，项目基本结构如下（重点关注以下文件 / 目录）：

my-first-vue3-app/
├─ node_modules/       # 项目依赖包（无需手动修改）
├─ public/             # 静态资源目录（如图片、favicon.ico）
├─ src/                # 源代码目录（核心开发区域）
│  ├─ assets/          # 资源文件（图片、样式等）
│  ├─ components/      # 自定义组件目录
│  ├─ App.vue          # 根组件（整个应用的入口组件）
│  ├─ main.js          # 入口文件（程序启动入口）
│  └─ style.css        # 全局样式
├─ index.html          # 入口 HTML 文件
├─ package.json        # 项目配置（依赖、脚本命令等）
└─ vite.config.js      # Vite 配置文件

三、编写第一个 HelloWorld 程序

让我们修改默认项目，编写一个简单的 HelloWorld 程序，理解 Vue 3 的基本开发模式。

1. 修改根组件（App.vue）

Vue 组件文件（.vue）包含三个部分：

  • <template>：组件的 HTML 结构（视图）
  • <script>：组件的逻辑（数据、方法等）
  • <style>：组件的样式

打开 src/App.vue，替换为以下内容：

<template>
  <!-- 视图部分：展示数据和用户界面 -->
  <div class="app-container">
    <h1>{{ message }}</h1>
    <button @click="changeMessage">点击修改消息</button>
  </div>
</template>

<script setup>
// 逻辑部分：定义数据和方法（Vue 3 组合式 API）
import { ref } from 'vue';

// 定义响应式数据（ref 用于基本类型数据）
const message = ref('Hello, Vue 3!');

// 定义方法：点击按钮时修改消息
const changeMessage = () => {
  message.value = 'Hello, World! 👋';
};
</script>

<style>
/* 样式部分：美化界面 */
.app-container {
  text-align: center;
  margin-top: 50px;
}

button {
  padding: 8px 16px;
  font-size: 16px;
  margin-top: 20px;
  cursor: pointer;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #359e75;
}
</style>

2. 运行效果

确保开发服务器处于运行状态（npm run dev），打开浏览器访问 http://127.0.0.1:5173/，你会看到：

  • 页面显示 "Hello, Vue 3!" 文字

  • 点击按钮后，文字变为 "Hello, World! 👋"

这个简单的程序展示了 Vue 的核心特性：数据驱动视图—— 当数据（message）发生变化时，视图会自动更新，无需手动操作 DOM。

四、Vue 3 核心概念初识

通过上面的 HelloWorld 程序，我们已经接触到了 Vue 3 的一些核心概念，下面逐一解释：

1. 组件（Component）

Vue 应用是由组件构成的，每个 .vue 文件就是一个组件。组件可以理解为 “可复用的 UI 模块”，包含自己的视图、逻辑和样式。

  • App.vue 是根组件，整个应用的入口
  • 后续开发中，我们会创建更多组件（如 Header.vue、Card.vue），并组合使用

2. 响应式数据（Reactive Data）

在 Vue 中，数据是 “响应式” 的 —— 当数据变化时，依赖该数据的视图会自动更新。

  • ref 是 Vue 3 中创建响应式数据的方法之一，用于基本类型（字符串、数字、布尔值）
  • 访问或修改 ref 创建的数据时，需要通过 .value 属性（模板中使用时可省略）
// 创建响应式数据
const count = ref(0);

// 修改数据（会触发视图更新）
count.value = 1;

3. 模板语法（Template Syntax）

Vue 使用基于 HTML 的模板语法，允许在 HTML 中嵌入 Vue 特有的语法：

  • 插值表达式：{{ message }} 用于将数据渲染到视图中
  • 指令：以 v- 开头的特殊属性，用于实现逻辑控制（如 v-if 条件渲染、v-for 循环渲染）
  • 事件绑定：@click 是 v-on:click 的简写，用于绑定事件处理函数

4. 组合式 API（Composition API）

Vue 3 引入了组合式 API，主要通过 <script setup> 语法实现，相比 Vue 2 的 Options API 更灵活：

  • 可以按逻辑关注点组织代码（而不是按 data、methods 等选项分类）
  • 更方便地复用代码逻辑
  • 更好的 TypeScript 支持

上面的代码中，import { ref } from 'vue' 和 const message = ref(...) 就是组合式 API 的使用方式。

5. 生命周期（Lifecycle）

Vue 组件从创建到销毁会经历一系列阶段，称为生命周期。我们可以通过生命周期钩子函数在特定阶段执行代码。

常用的生命周期钩子（Vue 3 中需从 vue 导入）：

  • onMounted：组件挂载到 DOM 后执行（如初始化数据请求）
  • onUpdated：组件更新后执行
  • onUnmounted：组件卸载后执行（如清理定时器）

示例：

<script setup>
import { onMounted } from 'vue';

// 组件挂载后执行
onMounted(() => {
  console.log('组件已挂载到页面上');
  // 可以在这里发起数据请求
});
</script>

五、扩展练习：计数器功能

为了巩固所学知识，我们来实现一个简单的计数器功能：

  1. 显示当前计数（初始值为 0）
  2. 提供 “+1” 和 “-1” 两个按钮
  3. 点击按钮时更新计数
<template>
  <div class="counter">
    <h2>计数器: {{ count }}</h2>
    <div class="buttons">
      <button @click="increment">+1</button>
      <button @click="decrement">-1</button>
    </div>
  </div>
</template>

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

// 定义计数器响应式数据
const count = ref(0);

// 增加计数
const increment = () => {
  count.value++;
};

// 减少计数
const decrement = () => {
  count.value--;
};
</script>

<style>
.counter {
  text-align: center;
  margin: 50px;
}

.buttons button {
  margin: 0 10px;
  padding: 8px 16px;
}
</style>

将 App.vue 的内容替换为上述代码，观察运行效果，尝试理解数据如何驱动视图更新。

六、总结

通过实践，我们实现了以下效果：

  1. Vue 3 开发环境的搭建（Node.js + VS Code + Vite）
  2. 创建并运行了第一个 Vue 3 项目
  3. 编写了 HelloWorld 和计数器程序，实践了数据绑定和事件处理
  4. 初步认识了 Vue 3 的核心概念：组件、响应式数据、模板语法、组合式 API 等
avatar
文章
阅读
粉丝