核心概念：npm vs npx

在开始之前,需要理解两个关键命令：

• npm (Node Package Manager): Node.js 的包管理器，它用来安装和管理项目依赖（vue、vue-router 这些库），你在项目根目录下使用 npm install <package> 来安装包。
• npx: 一个包执行器，它可以从 npm 仓库中临时下载并执行一个包，而无需将它永久安装到你的项目中，非常适合用来运行那些只需要一次性执行的命令,比如创建新项目。

创建一个新的 Vue 项目（推荐）

这是最常见的初始安装场景，Vue 官方提供了几个脚手架工具来快速创建标准化的项目结构。

使用 create-vue (官方推荐，适用于 Vue 3)

这是 Vue 官方目前推荐的、最简单的方式来创建一个新项目，它由 npm 团队构建,配置灵活且轻量。

命令：

# npx 会自动下载并执行 create-vue
npx create-vue@latest

执行步骤：

1. 在你的终端（Terminal 或 Command Prompt）中运行上述命令。
2. create-vue 会启动一个交互式命令行界面，让你选择项目的配置项，
   • 项目名称
   • 是否使用 TypeScript
   • 是否使用 JSX
   • 是否使用 Vue Router 进行路由管理
   • 是否使用 Pinia 进行状态管理
   • 是否使用 Vitest 进行单元测试
   • 是否使用 End-to-End 测试解决方案
   • 是否 ESLint 进行代码规范检查
   • 是否配置 Prettier 进行代码格式化
3. 根据你的需求选择 Y (是) 或 N (否)。
4. 选择完毕后,它会自动创建项目文件夹并安装所有必要的依赖。

创建成功后，进入项目并启动开发服务器：

cd <你的项目名称>
npm install
npm run dev

使用 Vue CLI (经典方式，适用于 Vue 2 和 Vue 3)

Vue CLI 曾经是官方推荐的脚手架工具，功能非常强大，但配置相对复杂一些，现在官方更推荐使用 create-vue，但对于需要深度自定义配置的老项目或开发者来说，Vue CLI 仍然是一个不错的选择。

第一步：全局安装 Vue CLI

如果你的电脑上还没有安装 Vue CLI,需要先全局安装一次。

npm install -g @vue/cli

注意：-g 表示全局安装，这样你就可以在任何地方使用 vue 命令。

第二步：创建新项目

# vue create 命令会创建一个 Vue 项目
vue create <你的项目名称>

执行后，它也会让你选择一个预设（preset），比如默认的 Vue 3 配置,或者手动选择特性。

在现有项目中安装 Vue

如果你已经有了一个项目（例如一个普通的 HTML/JS 项目或一个 Node.js 后端项目），并想在其中引入 Vue，那么你只需要将 Vue 作为项目依赖来安装。

安装 Vue 3

# 在你的项目根目录下执行
npm install vue@next

@next 是一个特殊标签，指向 Vue 的最新版本（目前是 Vue 3），你也可以直接使用 npm install vue,它会安装最新的稳定版。

安装 Vue 2

如果你的项目需要使用 Vue 2,可以指定版本号：

# 安装 Vue 2 的最新版本
npm install vue@2
# 或者安装一个特定的版本
npm install vue@2.7.14

安装完成后，你就可以在你的 JavaScript 文件中通过 import Vue from 'vue' 来使用 Vue 了。

安装 Vue 的官方开发工具 (Vue Devtools)

这是一个浏览器扩展程序，极大地方便了 Vue 应用的调试，它不是通过 npm 安装的,而是通过浏览器的应用商店安装。

• Chrome 浏览器: 访问 Chrome Web Store
• Firefox 浏览器: 访问 Firefox Browser Add-ons
• Edge 浏览器: 访问 Microsoft Edge Add-ons

安装后，在浏览器开发者工具（F12 或 Ctrl+Shift+I）中会多一个 Vue 的面板，可以查看组件树、状态、路由等信息。

总结与对比

新手建议：

如果你是刚开始学习 Vue，直接使用 npx create-vue@latest 来创建你的第一个项目，这是最简单、最直接的方式。