从零上手：用 CodeBuddy Code CLI 搭建 Vue 待办事项应用完整流程

对于刚接触 Vue 开发的新手来说，“从 0 到 1 搭建项目” 往往是第一个难点 —— 环境配置、依赖安装、项目结构梳理，每一步都可能卡壳。而 CodeBuddy Code CLI（以下简称 Code CLI）恰好能解决这个痛点，它能自动帮我们完成项目初始化、配置优化等基础工作，让精力聚焦在核心功能开发上。今天就以 “Vue 待办事项应用” 为例，带大家走一遍完整开发流程，即使是零基础也能跟着做。

第一步：环境准备 —— 安装必要工具

在开始开发前，我们需要先搭建基础环境，核心是安装 Node.js 和 Code CLI。这两步是后续所有操作的前提，务必确保安装成功。

  1. 安装 Node.jsVue 项目依赖 Node.js 的包管理工具（npm 或 yarn），建议安装 LTS 版本（长期支持版，稳定性更高）。

    • 下载地址：Node.js 官网，根据系统选择 Windows/macOS 安装包。
    • 验证安装：打开终端（Windows 用 cmd 或 PowerShell，macOS 用终端），输入 node -v 和 npm -v，若能显示版本号（如 v18.17.0、v9.6.7），说明安装成功。

  2. 全局安装 Code CLI打开终端，执行以下命令，将 Code CLI 安装到全局（方便后续随时调用）：

    bash

    npm install -g @codebuddy/code-cli
    • 验证安装：输入 codebuddy -v，若显示版本号（如 v2.1.0），则表示 CLI 工具已就绪。

第二步：用 Code CLI 初始化 Vue 项目

环境搭好后，我们用 Code CLI 一键生成 Vue 项目框架，省去手动配置 webpack、babel 等复杂步骤。

  1. 创建项目目录先在电脑里建一个存放项目的文件夹（比如叫 vue-todo-app），然后在终端中进入这个目录：

    bash

    # 假设文件夹在桌面（Windows 路径可能是 C:\Users\你的用户名\Desktop\vue-todo-app）
cd ~/Desktop/vue-todo-app

  2. 执行初始化命令在当前目录下，输入 Code CLI 的初始化命令，然后根据提示选择配置：

    bash

    codebuddy init vue

    此时终端会弹出选项，新手建议按以下配置选择（直接回车确认默认值即可）：

    • 项目名称：默认 vue-project（可自定义，比如 todo-app）
    • Vue 版本：选择 Vue 3（目前主流版本，生态更完善）
    • 是否使用 TypeScript：选择 No（先从 JavaScript 入手，降低难度）
    • 包管理器：选择 npm（与 Node.js 自带工具一致，无需额外安装）
    • 是否添加 ESLint：选择 Yes（自动检查代码规范，避免低级错误）

  3. 启动开发服务器初始化完成后，终端会提示进入项目目录并启动服务。按以下命令执行：

    bash

    # 进入项目文件夹（比如刚才命名的 todo-app）
cd todo-app
# 启动开发服务器
npm run dev

    启动成功后，终端会显示一个本地地址（通常是 http://localhost:5173/），打开浏览器访问这个地址，能看到 Vue 的默认欢迎页面，说明项目初始化成功！

第三步：梳理项目结构 —— 知道文件该写在哪

第一次打开 Vue 项目，可能会被多个文件夹和文件绕晕。其实我们只需关注 src 目录（核心代码都在这里），其他目录（如 node_modules、public）暂时不用管。简单梳理 src 下的关键文件：

文件 / 文件夹 作用
src/main.js 项目入口文件，负责挂载 Vue 实例到页面上
src/App.vue 根组件，所有页面的 “容器”，后续会在这里写待办应用的核心逻辑
src/components 存放自定义组件（比如后续可拆出 “任务输入框”“任务列表项” 组件）
src/assets 存放静态资源（如图片、CSS 文件，后续可在这里写样式）

新手阶段，我们先把核心逻辑写在 App.vue 里，不用急于拆分组件，先实现功能再优化结构。

第四步：核心功能开发 —— 实现待办事项的 “增删改查”

待办应用的核心需求很明确：能输入任务、展示任务列表、标记任务完成 / 未完成、删除任务。我们基于 App.vue 逐步实现这些功能。

1. 编写模板结构（Template 部分）

打开 src/App.vue，先替换 <template> 标签里的内容 —— 这里负责页面的 “骨架”，包括输入框、添加按钮、任务列表：

vue

<template>
  <div class="todo-container">
    <!-- 标题 -->
    <h1>我的待办事项</h1>
    <!-- 任务输入区域 -->
    <div class="todo-input">
      <input 
        type="text" 
        v-model="newTodo" 
        placeholder="请输入新任务..." 
        @keyup.enter="addTodo"  <!-- 按回车也能添加任务 -->
      >
      <button @click="addTodo">添加任务</button>
    </div>
    <!-- 任务列表区域 -->
    <ul class="todo-list">
      <li v-for="(todo, index) in todoList" :key="index" class="todo-item">
        <!-- 复选框：标记完成状态 -->
        <input 
          type="checkbox" 
          v-model="todo.done" 
          @change="saveTodo"  <!-- 状态变化时保存 -->
        >
        <!-- 任务文本：完成的任务加删除线 -->
        <span :class="{ 'todo-done': todo.done }">{{ todo.text }}</span>
        <!-- 删除按钮 -->
        <button @click="deleteTodo(index)">删除</button>
      </li>
    </ul>
  </div>
</template>
  • 关键点：用 v-model 绑定输入框内容和任务完成状态；用 v-for 循环渲染任务列表；用 @click @keyup.enter 绑定点击、回车事件。

2. 编写逻辑代码（Script 部分）

接着替换 <script> 标签里的内容 —— 这里负责 “交互逻辑”，比如添加任务、删除任务、保存任务到本地：

vue

<script setup>
// 引入 Vue 的 ref 函数（用于定义响应式变量）
import { ref, onMounted } from 'vue';

// 1. 定义响应式变量
const newTodo = ref(''); // 绑定输入框的新任务内容
const todoList = ref([]); // 存储所有待办任务的数组

// 2. 页面加载时，从本地存储读取任务（避免刷新后任务消失）
onMounted(() => {
  const savedTodos = localStorage.getItem('todoList');
  if (savedTodos) {
    todoList.value = JSON.parse(savedTodos); // 把字符串转成数组
  }
});

// 3. 添加任务函数
const addTodo = () => {
  // 先判断输入框是否为空（避免添加空任务）
  if (newTodo.value.trim() === '') return;
  
  // 往任务列表里加新任务（包含文本和完成状态）
  todoList.value.push({
    text: newTodo.value.trim(),
    done: false // 默认未完成
  });
  
  // 保存到本地存储
  saveTodo();
  
  // 清空输入框
  newTodo.value = '';
};

// 4. 删除任务函数
const deleteTodo = (index) => {
  // 从数组中删除对应索引的任务
  todoList.value.splice(index, 1);
  // 保存到本地存储
  saveTodo();
};

// 5. 保存任务到本地存储函数（复用逻辑）
const saveTodo = () => {
  // 把数组转成字符串，存入 localStorage
  localStorage.setItem('todoList', JSON.stringify(todoList.value));
};
</script>
  • 关键点：用 ref 定义响应式变量（值变化时页面自动更新）；用 onMounted 钩子在页面加载时读取本地存储；用 localStorage 实现任务持久化（刷新页面不丢失）。

3. 编写样式（Style 部分）

最后添加 <style> 标签，美化页面（不用太复杂，清晰即可）：

vue

<style scoped>
/* 容器样式：居中显示 */
.todo-container {
  max-width: 600px;
  margin: 50px auto;
  padding: 0 20px;
  font-family: Arial, sans-serif;
}

/* 输入区域样式 */
.todo-input {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}
.todo-input input {
  flex: 1;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
}
.todo-input button {
  padding: 10px 20px;
  background: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.todo-input button:hover {
  background: #359469;
}

/* 列表样式 */
.todo-list {
  list-style: none;
  padding: 0;
}
.todo-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  margin-bottom: 10px;
  background: #f9f9f9;
  border-radius: 4px;
}
/* 完成任务的文本样式：加删除线、变灰色 */
.todo-done {
  text-decoration: line-through;
  color: #999;
}
.todo-item button {
  padding: 5px 10px;
  background: #ff4444;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.todo-item button:hover {
  background: #cc0000;
}
</style>
  • 关键点：用 scoped 确保样式只作用于当前组件；用 Flex 布局让元素对齐更灵活；hover 效果提升交互体验。

第五步：测试与优化 —— 确保功能正常运行

功能写好后，回到浏览器查看效果，测试以下场景：

  1. 在输入框输入 “买牛奶”，点击 “添加任务”，列表是否显示该任务？
  2. 勾选任务前的复选框，文本是否出现删除线？刷新页面后，状态是否保留？
  3. 点击 “删除” 按钮，任务是否从列表中消失？
  4. 按回车键添加任务，是否能正常触发？

如果遇到问题，可按以下思路排查：

  • 控制台报错：按 F12 打开浏览器控制台，查看 “Console” 标签的错误信息（比如变量名写错、函数未定义）。
  • 任务不持久化：检查 saveTodo 函数是否调用，localStorage 里是否有 todoList 数据（控制台 “Application” 标签 → “Local Storage”）。

第六步：项目打包与部署 —— 让别人也能访问你的应用

开发完成后，我们需要把项目 “打包” 成静态文件，再部署到线上，这样其他人通过链接就能访问你的待办应用。

  1. 执行打包命令在终端中（确保处于项目目录下），输入以下命令：

    bash

    npm run build

    打包完成后，项目根目录会生成一个 dist 文件夹 —— 这就是最终的静态文件（包含 HTML、CSS、JS）。

  2. 简单部署：用 Netlify 拖放部署新手推荐用 Netlify（免费、操作简单），步骤如下：

    • 打开 Netlify 官网，用邮箱注册账号。
    • 登录后，点击右上角 “Add new site” → “Deploy manually”。
    • 把 dist 文件夹直接拖到页面的上传区域，等待部署完成。
    • 部署成功后，Netlify 会生成一个随机链接（如 https://xxx.netlify.app/），复制这个链接，就能在任何设备上访问你的待办应用了！

总结：从 “0” 到 “1” 的收获与扩展

通过这次实战，你不仅用 Code CLI 快速搭建了 Vue 项目，还实现了待办应用的核心功能，同时掌握了 “响应式变量”“生命周期钩子”“本地存储” 等 Vue 基础知识点。

# vue.js # 前端 # javascript
Logo
AI Agent技术社区

Agent 垂直技术社区，欢迎活跃、内容共建。

更多推荐

cover

uniTerm v1.6.0 发布：超轻量全能开源终端软件，新增 Kubernetes 与容器管理、AI 技能与命令、Redis 哨兵模式

avatar AI Agent技术社区
cover

AI Agent 上线前应该怎么测试？一套可执行的检查清单

avatar AI Agent技术社区
cover

EvoMap：Agent从单体智能走向群体进化，经验复用才是关键

avatar AI Agent技术社区