零基础入门 Vue.js 开发指南：从安装到第一个项目，面试题挑战也不怕！

指针迷路了

2025-12-13 06:57

阅读 390

大家好！我是你们的老朋友，一个在大厂干了3年前端开发、业余时间在B站做技术UP主的“码农阿杰”。最近在评论区看到好多小伙伴留言：“Vue 到底怎么学？”“零基础能不能上手？”“面试官老问 Vue 响应式原理，我连基本语法都不会……”

我当初学的时候也是一头雾水——文档术语一堆，视频教程跳步太快，连 npm 是啥都搞不清。所以今天，我就用最“人话”的方式，带你从 零开始搭建环境、理解核心概念、写出第一个 Vue 项目，顺便告诉你如何通过 GitHub 和 面试题挑战 来巩固学习成果！

一、Vue.js 是什么？能用来做什么？

简单说：Vue 是一个用来构建用户界面的 JavaScript 框架。

它帮你把网页拆成一个个“组件”（比如导航栏、商品卡片、按钮）
数据变了，页面自动更新（不用手动操作 DOM）
代码更清晰、更容易维护

💡 举个栗子：你在电商网站看到的商品列表，点“加入购物车”后数字自动+1——这种动态交互，Vue 能轻松搞定！

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

别被“环境搭建”吓到！现在 Vue 3 + Vite 的组合，比泡面还快。

步骤 1：安装 Node.js

Vue 依赖 Node.js 运行。去官网 https://nodejs.org 下载 LTS 版本（长期支持版），一路下一步安装即可。

验证是否成功：

node -v  # 应输出 v18.x 或更高
npm -v   # 应输出 8.x 或更高

步骤 2：创建 Vue 项目（使用 Vite）

打开终端（Mac 用 Terminal，Windows 用 PowerShell 或 CMD），执行：

npm create vue@latest my-vue-app

然后按提示操作：

✅ 选 Yes 到所有默认选项（特别是 TypeScript: No，新手先用 JS）
进入项目目录：cd my-vue-app
安装依赖：npm install
启动开发服务器：npm run dev

🌟 提示：如果卡在 npm install，试试换淘宝镜像：
npm config set registry https://registry.npmmirror.com

启动成功后，你会看到类似：

Local: http://localhost:5173/

打开浏览器访问这个地址，就能看到 Vue 的欢迎页面！

三、核心概念：3 个关键词搞定 Vue

别背文档！记住这 3 个东西，你就入门了：

1. 响应式数据（Reactivity）

数据变了，页面自动更新。

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

// 定义一个响应式变量
const count = ref(0)

// 修改它
function increment() {
  count.value++
}
</script>

<template>
  <div>
    <p>当前计数：{{ count }}</p>
    <button @click="increment">+1</button>
  </div>
</template>

🔍 ref() 是 Vue 3 的新写法，比旧版 data() 更简洁。
注意：读写都要用 .value（模板里不用写，Vue 自动解包）

2. 指令（Directives）

以 v- 开头的 HTML 属性，用来控制 DOM 行为。

常用指令：

指令	作用	示例
`v-if`	条件渲染	`<div v-if="show">显示</div>`
`v-for`	循环渲染	`<li v-for="item in list" :key="item.id">{{ item.name }}</li>`
`v-model`	双向绑定	`<input v-model="message">`

3. 组件（Component）

把 UI 拆成独立可复用的小块。

比如新建一个 Hello.vue：

<!-- Hello.vue -->
<template>
  <h2>Hello, {{ name }}!</h2>
</template>

<script setup>
defineProps(['name'])
</script>

在 App.vue 中使用：

<template>
  <Hello name="小明" />
</template>

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

✅ 组件化 = 模块化思维，大型项目必备！

四、实战：做一个“待办事项”小应用

现在我们动手做一个真实项目，巩固上面知识！

第 1 步：清理 App.vue

删掉默认内容，只保留：

<template>
  <div class="todo-app">
    <h1>我的待办清单</h1>
    <!-- 后续代码写在这里 -->
  </div>
</template>

第 2 步：添加输入框和列表

<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>

<template>
  <div class="todo-app">
    <h1>我的待办清单</h1>
    
    <!-- 输入框 -->
    <input 
      v-model="newTodo" 
      @keyup.enter="addTodo"
      placeholder="输入任务，回车添加"
    >
    
    <!-- 列表 -->
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        <input type="checkbox" v-model="todo.done">
        <span :class="{ done: todo.done }">{{ todo.text }}</span>
      </li>
    </ul>
  </div>
</template>

<style scoped>
.done {
  text-decoration: line-through;
  color: #999;
}
</style>

第 3 步：运行看看效果！

保存文件，回到浏览器，你就能：

输入文字，回车添加任务
点击复选框标记完成
完成项会变灰并划线

🎉 恭喜！你已经做出了一个有交互的 Vue 应用！

五、新手常见问题 & 避坑指南

❓ Q1：为什么 `ref` 要用 `.value`，但模板里不用？

A：这是 Vue 3 的“自动解包”机制。在 <script> 里是 JS 对象，必须 .value；在 <template> 里 Vue 自动处理了。

❓ Q2：`v-for` 为什么要加 `:key`？

A：key 帮助 Vue 识别每个元素的身份。如果列表顺序变化，Vue 能高效更新 DOM，避免 bug。

❓ Q3：组件名为什么要大写开头？

A：这是约定！比如 MyButton.vue，引入时用 import MyButton from './MyButton.vue'。避免和原生 HTML 标签冲突。

⚠️ 避坑提醒：

不要在 v-for 里直接修改数组索引（如 todos[i] = newValue），要用 Vue.set 或 splice
v-if 和 v-for 不要同时用在同一个元素上（性能差）
所有响应式数据必须在 setup() 里声明，不能后期添加

六、下一步：用 GitHub 和面试题挑战加速成长

1. 把你的项目上传到 GitHub

在项目根目录执行：

git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/你的用户名/项目名.git
git push -u origin main

这样你就有了第一个作品集！面试时直接甩链接！

2. 主动迎接“面试题挑战”

别等面试才学！现在就思考这些问题：

“Vue 2 和 Vue 3 的响应式原理有什么区别？”
“ref 和 reactive 什么时候用哪个？”
“组件通信有哪些方式？”

💡 我的建议：每学一个知识点，就在笔记里写下 对应的面试题。比如学完 v-model，就记下：“v-model 的原理是什么？如何自定义？”

七、学习路径建议

巩固基础：官方文档 https://cn.vuejs.org 是最好的教材
动手项目：尝试做天气查询、博客系统、简易商城
深入原理：学习 Composition API、生命周期、自定义指令
生态扩展：学 Vue Router（路由）、Pinia（状态管理）
参与开源：在 GitHub 上找 Vue 项目，提 Issue 或 PR

📌 最后送你一句话：我当初也是从 console.log('Hello Vue') 开始的。编程没有捷径，但有正确的路径。坚持写代码，你一定能行！

行动起来吧！
今天就把环境搭好，跑通那个待办事项。然后截图发到 GitHub，再给自己出一道面试题挑战——你会发现，Vue 并没有想象中那么难。

如果你觉得这篇教程有用，欢迎去 B站搜“码农阿杰”，我会持续更新更多 零基础友好 的实战教程！我们下期见 👋

标签:面试题挑战GitHub

最热最新

暂无评论

为你推荐

暂无相关推荐

零基础入门 Vue.js 开发指南：从安装到第一个项目，面试题挑战也不怕！

一、Vue.js 是什么？能用来做什么？

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

步骤 1：安装 Node.js

步骤 2：创建 Vue 项目（使用 Vite）

三、核心概念：3 个关键词搞定 Vue

1. 响应式数据（Reactivity）

2. 指令（Directives）

3. 组件（Component）

四、实战：做一个“待办事项”小应用

第 1 步：清理 App.vue

第 2 步：添加输入框和列表

第 3 步：运行看看效果！

五、新手常见问题 & 避坑指南

❓ Q1：为什么 `ref` 要用 `.value`，但模板里不用？

❓ Q2：`v-for` 为什么要加 `:key`？

❓ Q3：组件名为什么要大写开头？

⚠️ 避坑提醒：

六、下一步：用 GitHub 和面试题挑战加速成长

1. 把你的项目上传到 GitHub

2. 主动迎接“面试题挑战”

七、学习路径建议

评论 0

为你推荐

精选内容

零基础入门 Vue.js 开发指南：从安装到第一个项目，面试题挑战也不怕！

一、Vue.js 是什么？能用来做什么？

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

步骤 1：安装 Node.js

步骤 2：创建 Vue 项目（使用 Vite）

三、核心概念：3 个关键词搞定 Vue

1. 响应式数据（Reactivity）

2. 指令（Directives）

3. 组件（Component）

四、实战：做一个“待办事项”小应用

第 1 步：清理 App.vue

第 2 步：添加输入框和列表

第 3 步：运行看看效果！

五、新手常见问题 & 避坑指南

❓ Q1：为什么 ref 要用 .value，但模板里不用？

❓ Q2：v-for 为什么要加 :key？

❓ Q3：组件名为什么要大写开头？

⚠️ 避坑提醒：

六、下一步：用 GitHub 和面试题挑战加速成长

1. 把你的项目上传到 GitHub

2. 主动迎接“面试题挑战”

七、学习路径建议

评论 0

为你推荐

相关推荐

精选内容

❓ Q1：为什么 `ref` 要用 `.value`，但模板里不用？

❓ Q2：`v-for` 为什么要加 `:key`？