从零开始，用 Vue3 做一个能跑起来的产品

低代码旁观者

2026-01-24 20:44

阅读 513

大家好，我是一个干了五年后端开发的工程师。虽然主要写 Java 和 Go，但这些年和前端同事配合得多了，也慢慢上手了 Vue。我当初学 Vue 的时候，最头疼的不是语法，而是“这东西到底能干啥？”、“怎么才能做出一个真正能用的东西？”。所以今天，我想用最实在的方式，带完全零基础的朋友，亲手做一个能跑起来的 Vue 产品——哪怕你连 HTML 是啥都不太清楚。

这篇文章不讲大道理，就一件事：跟着做，就能看到结果。过程中我会穿插面试题、GitHub 操作，以及“产品思维”的小提示，让你不仅会写代码，还能理解为什么这么写。

为什么是 Vue？它能帮你做什么？

Vue.js（简称 Vue）是一个前端框架，用来构建用户界面。简单说，就是你打开网页后看到的那些按钮、列表、弹窗、动画……这些交互部分，Vue 能帮你更高效地开发。

相比原生 JavaScript，Vue 的优势在于：

数据驱动视图：数据变了，页面自动更新，不用手动操作 DOM
组件化开发：把页面拆成小积木（比如导航栏、商品卡片），复用性强
生态成熟：有大量工具、插件、社区支持，找工作也常考

我见过不少新人一上来就啃 React 或 Angular，结果被配置劝退。Vue 的入门曲线更平缓，特别适合“先做出点东西”来建立信心。

第一步：搭好你的开发环境

别怕！我们只需要三样东西：

Node.js（运行 JavaScript 的环境）
VS Code（代码编辑器）
终端（命令行）

安装步骤（以 Windows/macOS 为例）

去 https://nodejs.org 下载 LTS 版本（长期支持版），安装时一路“下一步”即可。
安装完后，打开终端（Windows 用 PowerShell 或 CMD，macOS 用 Terminal），输入：
```
node -v
npm -v
```
如果看到版本号（比如 v18.17.0），说明装好了。
安装 VS Code：https://code.visualstudio.com，安装后打开。

💡 新手避坑：不要用淘宝镜像或乱装全局包！默认 npm 就够用了。

创建你的第一个 Vue 项目

Vue 官方提供了一个叫 Vite 的脚手架工具，比老的 Vue CLI 更快。在终端中运行：

npm create vue@latest my-vue-app

然后按提示操作：

项目名：直接回车（用默认的 my-vue-app）
是否添加 TypeScript？选 No
是否添加 JSX 支持？选 No
是否添加路由？选 Yes（后面会用到）
是否添加 Pinia 状态管理？选 No（初学先不用）
是否添加 ESLint？选 Yes（代码规范）
是否添加 Prettier？选 Yes（自动格式化）

完成后，进入项目并启动：

cd my-vue-app
npm install
npm run dev

如果看到类似这样的输出：

  VITE v4.4.9  ready in 320 ms

  ➜  Local:   http://localhost:5173/

恭喜！打开浏览器访问 http://localhost:5173，你就能看到 Vue 的欢迎页面了。

📌 产品思维小贴士：这个本地地址就是你的“产品原型”，别人可以通过局域网 IP 访问，快速给你提反馈。

核心概念：用最简单的语言讲清楚

Vue 3 的核心就三个词：响应式、组件、指令。我用做饭来比喻：

响应式（Reactivity）：就像你切菜时，菜量变了，锅里的油温自动调整。在 Vue 中，你改数据，页面自动更新。
组件（Component）：炒菜、煮汤、摆盘，每个步骤独立成“模块”，可以重复用。
指令（Directive）：比如 v-if 就像“如果没盐就不放”，控制元素是否显示。

1. 响应式数据：用 `ref` 和 `reactive`

打开 src/App.vue，这是主页面。我们删掉默认内容，自己写：

<template>
  <div>
    <h1>我的计数器：{{ count }}</h1>
    <button @click="increment">+1</button>
  </div>
</template>

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

const count = ref(0)

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

保存后，页面会自动刷新。点击按钮，数字就会变！

ref(0) 创建了一个响应式变量，初始值是 0
在模板中直接用 {{ count }} 显示
在 JS 中要通过 .value 修改（这是 Vue 3 的特性）

❓ 面试题：ref 和 reactive 有什么区别？
答：ref 用于基本类型（数字、字符串），reactive 用于对象。但 ref 在模板中会自动解包，所以更常用。

2. 组件：把功能拆成小块

假设我们要做个“待办事项”列表，可以把“单个任务项”做成组件。

新建文件 src/components/TodoItem.vue：

<template>
  <div class="todo-item">
    <span :class="{ completed: props.completed }">{{ props.text }}</span>
    <button @click="toggle">✔</button>
  </div>
</template>

<script setup>
const props = defineProps({
  text: String,
  completed: Boolean
})

const emit = defineEmits(['toggle'])

function toggle() {
  emit('toggle')
}
</script>

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

然后在 App.vue 中使用它：

<template>
  <div>
    <h1>我的待办清单</h1>
    <TodoItem
      v-for="(item, index) in todos"
      :key="index"
      :text="item.text"
      :completed="item.completed"
      @toggle="toggleTodo(index)"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import TodoItem from './components/TodoItem.vue'

const todos = ref([
  { text: '学习 Vue', completed: false },
  { text: '提交 GitHub', completed: true }
])

function toggleTodo(index) {
  todos.value[index].completed = !todos.value[index].completed
}
</script>

现在，你已经有了一个可交互的待办列表！

💡 我当初学的时候：总搞不清 props 和 emit，后来记住一句话：“父传子用 props，子通知父用 emit”，就通了。

实战项目：做一个“产品级”待办应用

光有列表不够，一个真正的“产品”需要：

能添加新任务
能清除已完成
数据能保存（刷新不丢失）

步骤 1：添加输入框

在 App.vue 的 <template> 顶部加：

<input v-model="newTodo" @keyup.enter="addTodo" placeholder="输入新任务..." />
<button @click="addTodo">添加</button>

在 <script setup> 中加：

const newTodo = ref('')

function addTodo() {
  if (newTodo.value.trim()) {
    todos.value.push({ text: newTodo.value, completed: false })
    newTodo.value = ''
  }
}

步骤 2：清除已完成

加一个按钮：

<button @click="clearCompleted">清除已完成</button>

对应方法：

function clearCompleted() {
  todos.value = todos.value.filter(todo => !todo.completed)
}

步骤 3：数据持久化（存到 localStorage）

在 App.vue 中加：

// 初始化时读取
const savedTodos = localStorage.getItem('todos')
if (savedTodos) {
  todos.value = JSON.parse(savedTodos)
}

// 监听变化，自动保存
watch(todos, (newVal) => {
  localStorage.setItem('todos', JSON.stringify(newVal))
}, { deep: true })

别忘了导入 watch：

import { ref, watch } from 'vue'

✅ 现在，你的待办应用已经是一个完整的“产品”了！刷新页面也不会丢数据。

把代码上传到 GitHub（面试加分项！）

很多新人忽略这一步，但会用 Git 是前端岗位的基本要求。

操作步骤

去 https://github.com 注册账号

在项目根目录初始化 Git：

git init
git add .
git commit -m "first commit"

在 GitHub 上新建一个仓库（比如叫 my-vue-todo），不要初始化 README

按照提示关联远程仓库（例如）：

git remote add origin https://github.com/你的用户名/my-vue-todo.git
git branch -M main
git push -u origin main

成功后，你的代码就在 GitHub 上了！面试时可以说：“我做过一个 Vue 待办应用，代码在 GitHub，欢迎查看。”

📌 面试题：为什么前端项目要上传 GitHub？
答：展示代码能力、版本管理习惯、协作意识，也是作品集的一部分。

新手常见问题 & 解决方案

问题	原因	解决方法
页面不更新	忘了用 `ref` / `reactive`	确保所有数据都是响应式的
组件不显示	忘记注册组件	`<script setup>` 中要用 `import` 并在模板中使用
报错 `xxx is not defined`	变量未声明或拼写错误	检查大小写、是否漏了 `const`
点击没反应	事件写错（如 `@click` 写成 `onclick`）	Vue 用 `@` 代替 `on`
样式不生效	忘了 `scoped` 或类名写错	用浏览器开发者工具检查元素

💡 避坑指南：遇到问题先看浏览器控制台（F12），90% 的错误信息都在那里。

下一步怎么学？我的建议

你现在已经能做出一个完整的小产品了！接下来可以：

学 Vue Router：让应用支持多页面（比如“全部任务”、“已完成”）
学状态管理（Pinia）：当组件间通信变复杂时，用它统一管理数据
学 Axios：调用后端 API，实现真实数据交互
部署上线：用 Vercel 或 Netlify 免费部署，生成一个真实网址

最后送你一句我常对新人说的话：“先做出能跑的东西，再追求完美。” 面试官更看重你解决问题的能力，而不是代码有多炫。

结语

这篇教程从零开始，带你完成了一个可交互、可持久化、可分享的 Vue 产品。过程中融入了 GitHub 操作、常见面试题，以及产品思维的思考。

记住，每一个大神，都曾是从“Hello World”开始的。你现在做的这个待办应用，可能就是你程序员生涯的第一个“产品”。

动手去写吧！遇到问题，就查文档、搜错误、问社区。编程不是背答案，而是培养解决问题的能力。

祝你 coding 愉快！

标签:面试题GitHub产品

最热最新

暂无评论

为你推荐

暂无相关推荐

从零开始，用 Vue3 做一个能跑起来的产品

为什么是 Vue？它能帮你做什么？

第一步：搭好你的开发环境

安装步骤（以 Windows/macOS 为例）

创建你的第一个 Vue 项目

核心概念：用最简单的语言讲清楚

1. 响应式数据：用 `ref` 和 `reactive`

2. 组件：把功能拆成小块

实战项目：做一个“产品级”待办应用

步骤 1：添加输入框

步骤 2：清除已完成

步骤 3：数据持久化（存到 localStorage）

把代码上传到 GitHub（面试加分项！）

操作步骤

新手常见问题 & 解决方案

下一步怎么学？我的建议

结语

评论 0

为你推荐

精选内容

从零开始，用 Vue3 做一个能跑起来的产品

为什么是 Vue？它能帮你做什么？

第一步：搭好你的开发环境

安装步骤（以 Windows/macOS 为例）

创建你的第一个 Vue 项目

核心概念：用最简单的语言讲清楚

1. 响应式数据：用 ref 和 reactive

2. 组件：把功能拆成小块

实战项目：做一个“产品级”待办应用

步骤 1：添加输入框

步骤 2：清除已完成

步骤 3：数据持久化（存到 localStorage）

把代码上传到 GitHub（面试加分项！）

操作步骤

新手常见问题 & 解决方案

下一步怎么学？我的建议

结语

评论 0

为你推荐

相关推荐

精选内容

1. 响应式数据：用 `ref` 和 `reactive`