✅ 一、前置准备：安装必要工具

1. 安装 Node.js（包含 npm）

npm 是 Node.js 的包管理器，用来安装 Vue、Webpack 等前端工具。

  • 打开官网：https://nodejs.org
  • 下载 LTS（长期支持）版本（推荐，稳定）
  • 下载完成后，双击安装 → 点击 Next 一路默认安装即可（不需要改路径）

✅ 安装完成后，打开 命令行工具（Windows 用 cmd 或 PowerShell，Mac 用 Terminal），输入以下命令验证：

1
2
node -v
npm -v

你会看到类似输出：

1
2
v20.12.2   ← Node.js 版本
10.5.2     ← npm 版本

🎯 如果没显示版本，请重启命令行或电脑，或检查是否安装成功。

✅ 二、使用 Vue CLI 创建项目（推荐新手方式）

Vue 官方提供了一个叫 Vue CLI 的脚手架工具，能一键生成完整项目结构，免去手动配置 Webpack、Babel 等复杂配置。

1. 全局安装 Vue CLI（只需要做一次）

1
npm install -g @vue/cli

-g 表示全局安装，这样你在任何文件夹都能使用 vue 命令。

✅ 安装完成后检查：

1
vue --version

你应该看到类似：@vue/cli 5.0.8

💡 如果提示权限错误（Mac/Linux），请在命令前加 sudo：

1
sudo npm install -g @vue/cli

✅ 三、创建你的第一个 Vue 项目

1.配置国内镜像源

1
npm config set registry https://registry.npmmirror.com

2. 打开你想存放项目的文件夹（比如 D:\my-vue-project）

在文件夹空白处，按住 Shift + 右键 → 选择“在此处打开 PowerShell 窗口”（Windows）
或打开终端，进入该目录：

1
cd D:\my-vue-project

3. 创建项目

执行命令：

1
vue create my-first-vue-app

my-first-vue-app 是你的项目名，可以改成你喜欢的名字（比如 my-blog）

4. 选择配置（新手推荐默认）

执行后会弹出选项：

1
2
3
4
? Please pick a preset:
  Default ([Vue 2] babel, eslint)   ← 选这个（Vue 2，已停止维护）
> Default (Vue 3) ([Vue 3] babel, eslint)   ← ✅ 选这个！Vue 3 是最新版本
  Manually select features

👉 使用 上下箭头 选择 Default (Vue 3)，然后按回车。

✅ Vue 3 是当前官方推荐版本，性能更好，语法更现代！

5. 等待安装依赖（可能需要几分钟）

系统会自动：

  • 创建项目文件夹 my-first-vue-app
  • 下载并安装所有依赖（比如 vue、router、pinia、webpack 等）
  • 生成标准项目结构

等待完成，出现提示：

1
2
3
4
5
✔  Successfully created project my-first-vue-app.
✔  Get started with the following commands:

 ▸ cd my-first-vue-app
 ▸ npm run dev

✅ 四、启动项目，看看效果

1. 进入项目文件夹

1
cd my-first-vue-app

2. 启动开发服务器

1
npm run dev

⚠️ 注意：是 dev，不是 start！

你会看到类似输出：

1
2
3
4
VITE v5.4.10  ready in 897 ms

➜  Local:   http://localhost:5173/
➜  Network: use --host to expose

3. 打开浏览器

在浏览器地址栏输入：

1
http://localhost:5173

🎉 恭喜你！你看到了 Vue 的欢迎页面！

你看到的是一个漂亮的蓝色 Vue Logo 和提示文字：“Welcome to Your Vue.js App”。

✅ 五、认识你的项目结构（重要！）

进入项目文件夹 my-first-vue-app，你会看到这些文件：

1
2
3
4
5
6
7
8
9
10
11
my-first-vue-app/
├── public/           # 静态资源（比如 index.html）
├── src/              # ✅ 你的主要代码都在这里
│   ├── assets/       # 图片、字体等静态资源
│   ├── components/   # 可复用的 Vue 组件（比如 Header.vue）
│   ├── App.vue       # 根组件（所有页面的入口）
│   ├── main.js       # 入口文件，启动 Vue 应用
│   └── router/       # 路由配置（如果选了路由）
├── package.json      # 项目依赖和脚本配置（npm 就靠它）
├── vite.config.js    # 构建配置（Vue 3 默认用 Vite，比 Webpack 快很多）
└── ...

🔍 核心文件说明：

文件 作用
src/App.vue 最外层组件，你改它页面就变！
src/main.js Vue 应用启动入口，类似 Java 的 main() 方法
package.json 记录了你的项目用到了哪些工具（比如 vue、vite），以及启动命令

你可以打开 App.vue，尝试修改一下文字：

1
2
3
4
<template>
  <h1>Hello, 我是新手！🎉</h1>
  <img alt="Vue logo" src="./assets/logo.png" />
</template>

保存后，浏览器会自动刷新，你立刻就能看到变化！

✅ 六、常用命令总结（必备！）

命令 作用
npm run dev 启动开发服务器（本地预览）
npm run build 打包项目，生成可部署的静态文件（在 dist/ 文件夹）
npm install 安装 package.json 中列出的所有依赖（别人给你项目时用）
npm install 包名 安装新包（比如：npm install axios）
npm run dev --host 允许局域网其他设备访问（用于手机测试）

💡 提示：npm run dev 可以简写成 npm run dev，但不能写成 npm dev

✅ 七、进阶建议（新手可先跳过，但建议了解）

方向 建议
✅ 代码编辑器 推荐VS Code，安装插件：Volar（Vue 3 支持）
✅ 项目管理 用 Git 管理代码：git init → git add . → git commit -m "first commit"
✅ 部署上线 打包后把 dist/ 文件夹上传到 GitHub Pages、Netlify、Vercel、阿里云 OSS 等
✅ 学习路线 先掌握 Vue 基础语法（v-model, v-for, v-if）→ 组件通信 → 路由 → 状态管理（Pinia）

✅ 八、常见问题解答（FAQ）

❓ Q1：为什么我执行 vue create 提示不是内部命令？

答：Node.js 或 npm 安装失败，或环境变量未生效。请重启终端或电脑，重新运行 node -v 验证。

❓ Q2：npm 安装太慢怎么办？

答：换国内镜像源（推荐）：

1
npm config set registry https://registry.npmmirror.com

然后重试安装命令。

❓ Q3：什么是 Vite？为什么不用 Webpack？

答：Vite 是 Vue 3 官方推荐的新构建工具，启动快、热更新快，配置简单，适合新手！

❓ Q4：我想用 Vue 2 做项目可以吗？

答：不推荐。Vue 2 已于 2023 年停止维护，新项目请一律使用 Vue 3。

✅ 九、下一个目标：你的第一个组件！

在 src/components/ 文件夹下新建一个文件：HelloWorld.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<template>
  <div class="hello">
    <h3>{{ message }}</h3>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      message: '你好，Vue 世界！'
    }
  }
}
</script>

<style scoped>
.hello {
  color: blue;
  text-align: center;
}
</style>

然后在 App.vue 里引入使用：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <HelloWorld />
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  data() {
    return {
      msg: '欢迎来到你的 Vue 项目！'
    }
  }
}
</script>

保存后，页面立马更新！🎉

✅ 总结：你的学习路线图

阶段 任务
✅ 第1步 安装 Node.js + npm
✅ 第2步 安装 Vue CLI：npm install -g @vue/cli
✅ 第3步 创建项目：vue create my-app
✅ 第4步 启动项目：cd my-app → npm run dev
✅ 第5步 修改 App.vue，看到效果
✅ 第6步 学习 Vue 基础语法：v-model, v-for, v-if, 组件
✅ 第7步 尝试新建组件、引入图片、写样式
✅ 第8步 学习 Vue Router（页面跳转）和 Pinia（状态管理）

🎁 额外福利：推荐学习资源

  • 📘 Vue 3 官方文档（中文）：https://cn.vuejs.org/
  • 🎥 B站推荐视频：搜索 “Vue3零基础入门”（推荐“老猿说代码”）
  • 🧩 VS Code 插件推荐：
    • Volar（Vue 3 语法高亮/智能提示）
    • ESLint（代码规范）
    • Auto Rename Tag（自动闭合标签）

✅ 结语

你现在已经有能力独立搭建一个 Vue 前端项目了！🎉
这比很多程序员刚入门时要强太多了。