东月的文档站

Appearance

Return to top
On this page

Vue 是一个 JavaScript 框架，它本质上就是一堆 .js 文件。要开始用 Vue，你需要两样东西：

  1. Node.js — 一个能让你在电脑上运行 JavaScript 的环境（不仅仅是浏览器里）
  2. Vite — 一个帮你创建 Vue 项目的工具（脚手架） 💡 Tip：类比一下 如果把写 Vue 项目比作盖房子：
  • Node.js = 施工队（负责干活）
  • Vite = 图纸 + 工具（帮你搭好骨架）

第一步：安装 Node.js

去 nodejs.org 下载 LTS 版本（长期支持版，最稳定），像安装普通软件一样点"下一步"装好即可。 装完后打开终端（PowerShell 或 cmd），验证一下：

bash
node -v      # 能看到版本号就说明装好了，比如 v20.11.0
npm -v       # npm 是 Node 自带的包管理器，也会显示版本号

第二步：创建项目

在终端中进入你想放项目的文件夹，然后运行：

bash
npm create vue@latest

这条命令会问你几个问题：

  • Project name（项目名）：给你的项目起个名字，比如 my-first-app
  • 是否加 TypeScript？：新手可以先选 No，先学 Vue 本身
  • 是否加 Router？：新手先选 No，后面再学
  • 其他选项全部回车跳过就好 💡 Tip：这些选项以后都能加，不用纠结。

第三步：安装依赖并启动

bash
cd my-first-app      # 进入项目文件夹
npm install           # 下载项目需要的所有依赖（就这一次，以后不用）
npm run dev           # 启动开发服务器

看到类似 Local: http://localhost:5173/ 就说明成功了。用浏览器打开这个地址，你应该能看到一个 Vue 的欢迎页。 📝 Note：开发服务器是什么？npm run dev 会启动一个"开发服务器"，它做的事情是：

  1. 把你写的代码实时编译成浏览器能看懂的样子
  2. 当你修改代码并保存时，浏览器自动刷新
  3. 这就是"热更新"——改代码 → 保存 → 立刻看到效果

项目文件夹里有什么？

刚创建的项目结构如下。你不需要一次性全搞懂，先认识最重要的：

my-first-app/
├── index.html          ← 唯一的 HTML 页面（SPA 的入口）
├── package.json         ← 项目配置 + 依赖列表（相当于购物清单）
├── vite.config.js       ← Vite 的配置文件（一般不用动）
├── src/                 ← 你写代码的地方，大部分时间都在这个文件夹里
│   ├── main.js          ← 项目的启动文件（告诉 Vue "从哪开始"）
│   ├── App.vue          ← 根组件（整个页面的最外层）
│   └── components/      ← 放各种小组件的文件夹
└── public/              ← 放不经过处理的静态文件（如图片、字体）

📝 Note：.vue 文件是什么？.vue 文件就是 Vue 的"单文件组件"。一个 .vue 文件包含三部分：

  • <template> — HTML 模板（你看到的样子）
  • <script> — JavaScript 逻辑（控制行为）
  • <style> — CSS 样式（控制外观） 后面会逐一详细讲解。

VSCode 插件

如果你用 VSCode 写代码，搜 Vue - Official 安装，它会提供：

  • .vue 文件的语法高亮（代码有颜色）
  • 输入时的智能提示
  • 写错时的类型检查

快速检查

装完后，打开 src/App.vue，找到 <h1> 标签，把里面的文字改成 "Hello, Vue!"，保存——浏览器应该马上更新。 如果能做到这一步，环境就搭好了，可以开始学 Vue 了！ 下一步： 💡 Tip：Composition API 写法（Vue 3） 环境搭建本身不涉及代码风格差异，创建项目的命令两种 API 风格通用。 详见：