Vue 教程：从零搭建开发环境并创建你的第一个项目

快速概述

Vue.js 是一个渐进式的 JavaScript 框架，其目标是通过尽可能简单的 API 实现响应式的数据绑定和组合的视图组件，它不仅易于上手，还便于与第三方库或既有项目整合。本教程将指导你从零搭建 Vue 开发环境并创建第一个项目。适用场景包括：希望快速构建单页应用（SPA）、需要组件化开发、或希望与现有项目渐进式集成的开发者。前置环境要求：熟悉命令行，并已安装 ^20.19.0 || >=22.12.0 版本的 Node.js。

核心概念与原理

Vue 的核心机制是响应式数据绑定与组件化。通过选项式 API（Options API），开发者可以使用 data 定义响应式数据、methods 定义方法、computed 创建计算属性、watch 监听数据变化，并通过生命周期钩子（如 created、mounted）在特定阶段执行代码。Vue 3 还引入了组合式 API，但选项式 API 仍是 Vue 2 中广泛使用的编码风格。现代 Vue 项目通常基于 Vite 构建设置，支持单文件组件（SFC），使模板、脚本和样式集中在一个 .vue 文件中。

实战步骤与代码

1. 安装 Node.js

确保已安装最新版 Node.js（版本需满足 ^20.19.0 || >=22.12.0）。可在终端运行 node -v 检查版本。

2. 创建项目

在命令行中运行以下命令（不要带 $ 符号）：

# npm
npm create vue@latest
或使用 pnpm
pnpm create vue@latest 

该命令会安装并执行 create-vue，这是 Vue 官方的项目脚手架工具。你会看到一系列可选功能提示，如 TypeScript、JSX、Vue Router、Pinia、Vitest、ESLint 等，按需选择即可。

3. 安装依赖并运行

cd <your-project-name>
npm install
npm run dev

浏览器访问终端输出的本地地址，即可看到你的第一个 Vue 应用。

4. 项目结构简介

创建的项目包含 src 目录，其中 main.js 是入口文件，App.vue 是根组件。你可以修改 App.vue 中的模板和样式，观察热更新效果。

5. 编写第一个组件

在 src/components 下新建 HelloWorld.vue，使用选项式 API 定义数据和方法：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="sayHello">点击</button>
  </div>
</template>
<script> export default { data() { return { message: 'Hello Vue!' } }, methods: { sayHello() { console.log('hello world') } } } </script> 

然后在 App.vue 中引入并使用该组件。

常见坑点与优化

• Node 版本过低：如果运行 create-vue 时提示版本不支持，请升级 Node.js 至 ^20.19.0 或 >=22.12.0。
• 依赖安装失败：可尝试使用 pnpm 或 yarn 替代 npm，或清除 npm 缓存后重试。
• 端口被占用：Vite 默认使用 5173 端口，若被占用会自动切换，也可在 vite.config.js 中配置 server.port。
• 响应式数据丢失：在选项式 API 中，data 必须返回一个函数，否则多个组件实例会共享数据。
• 性能优化：合理使用 computed 缓存计算结果，避免在模板中执行复杂逻辑；使用 v-if/v-show 控制渲染；对大型列表使用 key 属性。

通过以上步骤，你已经成功搭建了 Vue 开发环境并创建了第一个项目。接下来可以深入学习 Vue Router、Pinia 等生态工具，逐步构建更复杂的应用。