零基础入门 Vue.js 开发指南：从“代码人生”开始的第一步

慢查询猎人

2025-12-13 06:38

阅读 850

大家好，我是掘金上的一名全栈工程师，985毕业，也带过不少零基础转行的朋友。最近收到很多私信：“我想学前端，该选 Vue 还是 React？”、“Vue 到底难不难？”、“学完能不能求职？”……这些问题我都经历过。

我当初学的时候，也是对着一行行代码发懵，不知道 v-model 是啥，更别说组件通信了。但只要你愿意动手、不怕犯错，Vue 其实是非常友好的入门框架。今天这篇《零基础入门 Vue.js 开发指南》，就是为完全没碰过代码的你量身打造的。我会用最通俗的语言、最具体的例子，带你走完从安装到写第一个小项目的全过程。

更重要的是——无论你是想开启“代码人生”，还是为了求职加薪，Vue 都是一个极佳的起点。

一、Vue.js 是什么？为什么选它？

Vue.js（简称 Vue）是一个用于构建用户界面的 JavaScript 框架。你可以把它理解成“搭积木的工具箱”：页面上的按钮、列表、表单等元素，都是积木；而 Vue 帮你把这些积木快速、有序地拼起来，并让它们能互相“说话”。

Vue vs React：新手该怎么选？

很多初学者纠结这个问题。其实两者都能做同样的事，但对新人来说：

对比项	Vue.js	React
学习曲线	更平缓，语法更直观	需要理解 JSX、状态管理等概念
文档体验	中文文档优秀，示例丰富	官方文档好，但部分概念抽象
求职市场	国内大厂（如阿里、腾讯）广泛使用	国际公司和部分国内团队偏好
上手速度	几小时就能写出交互页面	可能需要几天熟悉生态

我的建议：如果你是纯零基础，先学 Vue！等你理解了“组件”“响应式”这些核心思想，再学 React 会快得多。我带过的学员里，80% 都是从 Vue 起步，后来顺利拿到前端 offer。

二、环境准备：5 分钟搭建开发环境

别被“环境搭建”吓到，现在工具已经非常傻瓜化了。我们只需要三样东西：

一个浏览器（推荐 Chrome）
一个代码编辑器（推荐 VS Code）
Node.js（用来运行项目）

步骤 1：安装 VS Code

访问官网下载安装，全程点“下一步”即可。
安装后，打开它，你会看到一个干净的文本编辑界面——这就是你的“代码工坊”。

步骤 2：安装 Node.js

访问 https://nodejs.org/
下载 LTS 版本（长期支持版，最稳定）
安装时全部默认选项即可

✅ 验证是否安装成功：
打开终端（Windows 按 Win+R 输入 cmd，Mac 打开 Terminal），输入：
node -v
npm -v
如果显示版本号（如 v18.x.x），说明安装成功！

步骤 3：创建你的第一个 Vue 项目

Vue 官方提供了一个脚手架工具叫 Vite（读作 “veet”），比老式的 Vue CLI 更快更简单。

在终端中依次执行：

# 创建新项目（my-vue-app 是项目名，可自定义）
npm create vue@latest my-vue-app

# 进入项目目录
cd my-vue-app

# 安装依赖
npm install

# 启动开发服务器
npm run dev

稍等几秒，终端会输出一个本地地址，比如 http://localhost:5173。复制到浏览器打开，你会看到一个欢迎页面！🎉

💡 小贴士：如果卡在 npm install，可以尝试换源：
npm config set registry https://registry.npmmirror.com

三、核心概念：用“做饭”理解 Vue

我当初学的时候，最怕听“响应式”“虚拟 DOM”这种词。后来我发现，用生活例子解释技术，最容易懂。

1. 响应式数据（Reactivity）

想象你在做饭：

锅里有水（数据）
水开了（数据变化）
你就下饺子（页面自动更新）

在 Vue 中，你只需要声明“水是多少度”，一旦水温变了，页面上显示的温度数字自动跟着变，不用手动刷新！

<template>
  <div>
    <p>水温：{{ temperature }}℃</p>
    <button @click="boil">烧水</button>
  </div>
</template>

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

// 声明一个响应式变量
const temperature = ref(20)

function boil() {
  temperature.value = 100 // 水开了！
}
</script>

🔍 注意：ref() 是 Vue 3 的写法，比 Vue 2 更简洁。我们教程基于最新版 Vue 3 + <script setup> 语法。

2. 组件（Component）：乐高积木

页面 = 头部 + 内容 + 底部。每个部分就是一个组件。

比如，我们可以把“按钮”做成一个独立组件：

<!-- Button.vue -->
<template>
  <button class="btn">{{ text }}</button>
</template>

<script setup>
defineProps(['text']) // 接收外部传来的文字
</script>

<style>
.btn {
  padding: 8px 16px;
  background: #409eff;
  color: white;
  border: none;
  border-radius: 4px;
}
</style>

然后在主页面使用它：

<template>
  <Button text="点击我" />
</template>

<script setup>
import Button from './components/Button.vue'
</script>

是不是像搭乐高？每个组件独立、可复用！

3. 指令（Directives）：HTML 的“魔法咒语”

Vue 提供了一些以 v- 开头的特殊属性，叫指令。它们能让 HTML “活”起来。

指令	作用	示例
`v-if`	条件渲染（有/无）	`<div v-if="show">显示</div>`
`v-for`	循环列表	`<li v-for="item in list">`
`v-model`	表单双向绑定（输入 ↔ 数据）	`<input v-model="msg">`
`@click`	点击事件（简写）	`<button @click="handle">`

⚠️ 注意：@click 是 v-on:click 的简写，: 是 v-bind: 的简写。

四、实战项目：做一个“待办事项”清单

光看不练假把式。现在，我们一起做一个超简单的 Todo List！

第 1 步：清理默认代码

打开 src/App.vue，替换成：

<template>
  <div class="todo-app">
    <h1>我的待办清单</h1>
    <!-- 这里写我们的功能 -->
  </div>
</template>

<script setup>
</script>

<style>
.todo-app {
  max-width: 600px;
  margin: 50px auto;
  padding: 20px;
}
</style>

第 2 步：添加输入框和“添加”按钮

<template>
  <div class="todo-app">
    <h1>我的待办清单</h1>
    
    <div class="input-area">
      <input v-model="newTodo" @keyup.enter="addTodo" placeholder="输入任务..." />
      <button @click="addTodo">添加</button>
    </div>
  </div>
</template>

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

const newTodo = ref('')
const todos = ref([])

function addTodo() {
  if (newTodo.value.trim()) {
    todos.value.push({
      id: Date.now(),
      text: newTodo.value,
      done: false
    })
    newTodo.value = '' // 清空输入框
  }
}
</script>

第 3 步：显示任务列表

<template>
  <!-- ... 上面的代码不变 ... -->

  <ul class="todo-list">
    <li v-for="todo in todos" :key="todo.id">
      <input type="checkbox" v-model="todo.done" />
      <span :class="{ done: todo.done }">{{ todo.text }}</span>
      <button @click="removeTodo(todo.id)">删除</button>
    </li>
  </ul>
</template>

<script setup>
// ... 上面的代码 ...

function removeTodo(id) {
  todos.value = todos.value.filter(todo => todo.id !== id)
}
</script>

<style>
/* ... 原有样式 ... */

.todo-list li {
  display: flex;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}

.done {
  text-decoration: line-through;
  color: #999;
}

input, button {
  margin-right: 10px;
}
</style>

第 4 步：保存到本地存储（可选进阶）

为了让刷新后任务不丢失，我们可以用 localStorage：

// 在 script setup 顶部添加
const todos = ref(JSON.parse(localStorage.getItem('todos') || '[]'))

// 在 addTodo 和 removeTodo 函数末尾加上：
localStorage.setItem('todos', JSON.stringify(todos.value))

现在，你的第一个 Vue 项目就完成了！是不是很有成就感？

五、新手常见问题解答

❓ Q1：为什么我的页面没更新？

检查变量是否用 ref() 或 reactive() 声明
修改 ref 变量时，要用 .value（如 count.value++）

❓ Q2：`<script setup>` 是什么？和普通 script 有什么区别？

这是 Vue 3 的新语法，更简洁，不用写 export default
所有顶层变量和函数自动暴露给模板，不用 return

❓ Q3：学 Vue 要先学 JavaScript 吗？

必须的！ 但不需要精通。掌握以下基础即可：
- 变量、函数、数组、对象
- if / for 控制流
- ES6 的 let/const、箭头函数、解构赋值

📚 推荐书籍：《JavaScript 高级程序设计（第4版）》前 8 章，或者免费在线教程《现代 JavaScript 教程》

❓ Q4：Vue 能用来求职吗？

完全可以！ 国内大量企业使用 Vue（尤其中小企业和传统行业数字化转型）
初级前端岗位要求通常包括：Vue + Element UI / Ant Design Vue + Axios + 基础工程化
我带的学员中，有人靠一个 Vue 项目 + 扎实基础，成功入职月薪 12K 的岗位

六、下一步学习建议：从入门到求职

恭喜你走完了第一步！但“代码人生”才刚刚开始。接下来，我建议你按这个路径走：

📌 第一阶段：夯实基础（1-2 周）

精通 Vue 核心：组件、props、emit、生命周期、计算属性
学习 Vue Router（页面跳转）
学习 Pinia（状态管理，替代 Vuex）

📌 第二阶段：实战项目（2-4 周）

做 2-3 个完整项目，比如：
- 电商商品列表页
- 博客后台管理系统
- 天气查询应用（调用 API）
学会使用 UI 库：Element Plus、Naive UI

📌 第三阶段：工程化 & 求职（1-2 周）

了解 Vite 配置、ESLint、Prettier
学会 Git 基本操作
写一份清晰的简历，突出你的项目经验

💡 避坑指南：

不要一上来就学 Vuex / TypeScript（初期用不到）

不要死记 API，多写代码自然就熟了

遇到 bug 先查官方文档，再搜掘金/Stack Overflow

结语：你的“代码人生”，从此刻开始

我当初学编程时，也觉得“前端好难”“我是不是不适合”。但坚持每天写一点代码，三个月后，我做出了人生第一个上线项目。

Vue 是一个温柔的起点。它不会让你一开始就面对复杂的配置和抽象概念，而是让你快速看到成果，获得正反馈。

记住：每一个高级工程师，都曾是连 console.log 都打错的新手。

现在，关掉这篇文章，打开你的 VS Code，敲下第一行 Vue 代码吧。你的“代码人生”，就从这一行开始。

本文首发于掘金，作者：全栈工程师老张。
如果你觉得有帮助，欢迎点赞、收藏、转发。有问题也可以在评论区留言，我会一一回复。

标签:代码人生书籍React求职

最热最新

暂无评论

为你推荐

暂无相关推荐

零基础入门 Vue.js 开发指南：从“代码人生”开始的第一步

一、Vue.js 是什么？为什么选它？

Vue vs React：新手该怎么选？

二、环境准备：5 分钟搭建开发环境

步骤 1：安装 VS Code

步骤 2：安装 Node.js

步骤 3：创建你的第一个 Vue 项目

三、核心概念：用“做饭”理解 Vue

1. 响应式数据（Reactivity）

2. 组件（Component）：乐高积木

3. 指令（Directives）：HTML 的“魔法咒语”

四、实战项目：做一个“待办事项”清单

第 1 步：清理默认代码

第 2 步：添加输入框和“添加”按钮

第 3 步：显示任务列表

第 4 步：保存到本地存储（可选进阶）

五、新手常见问题解答

❓ Q1：为什么我的页面没更新？

❓ Q2：`<script setup>` 是什么？和普通 script 有什么区别？

❓ Q3：学 Vue 要先学 JavaScript 吗？

❓ Q4：Vue 能用来求职吗？

六、下一步学习建议：从入门到求职

📌 第一阶段：夯实基础（1-2 周）

📌 第二阶段：实战项目（2-4 周）

📌 第三阶段：工程化 & 求职（1-2 周）

结语：你的“代码人生”，从此刻开始

评论 0

为你推荐

精选内容

零基础入门 Vue.js 开发指南：从“代码人生”开始的第一步

一、Vue.js 是什么？为什么选它？

Vue vs React：新手该怎么选？

二、环境准备：5 分钟搭建开发环境

步骤 1：安装 VS Code

步骤 2：安装 Node.js

步骤 3：创建你的第一个 Vue 项目

三、核心概念：用“做饭”理解 Vue

1. 响应式数据（Reactivity）

2. 组件（Component）：乐高积木

3. 指令（Directives）：HTML 的“魔法咒语”

四、实战项目：做一个“待办事项”清单

第 1 步：清理默认代码

第 2 步：添加输入框和“添加”按钮

第 3 步：显示任务列表

第 4 步：保存到本地存储（可选进阶）

五、新手常见问题解答

❓ Q1：为什么我的页面没更新？

❓ Q2：<script setup> 是什么？和普通 script 有什么区别？

❓ Q3：学 Vue 要先学 JavaScript 吗？

❓ Q4：Vue 能用来求职吗？

六、下一步学习建议：从入门到求职

📌 第一阶段：夯实基础（1-2 周）

📌 第二阶段：实战项目（2-4 周）

📌 第三阶段：工程化 & 求职（1-2 周）

结语：你的“代码人生”，从此刻开始

评论 0

为你推荐

相关推荐

精选内容

❓ Q2：`<script setup>` 是什么？和普通 script 有什么区别？