环境搭建

做任何 Vue3 项目前都要先准备好开发环境。本节以任务系统为例：安装 Node.js、用 Vite 创建工程、装好路由与状态管理库，最后把开发服务器跑起来，看到欢迎页即算成功。

安装 Node.js

Vite 依赖 Node.js（建议 18 及以上版本）。打开终端验证：

node -v    // 输出：v20.10.0（示例）
npm -v     // 输出：10.2.3（示例）

若提示找不到命令，请到 nodejs.org 下载 LTS 版本安装后重试。

用 Vite 创建项目

在希望存放代码的目录执行创建命令：

npm create vite@latest taskhub -- --template vue

参数说明：taskhub 是项目名；--template vue 表示生成 Vue3 模板。按提示选择 vue 后回车即可。随后进入项目并安装依赖：

cd taskhub
npm install

安装配套库

任务系统需要路由与状态管理，一并装上：

npm install vue-router pinia

安装完成后可打开 package.json，检查 dependencies 里是否出现这两个包名。

认识生成的目录

Vite 模板会生成如下结构（只列关键部分）：

taskhub/
├─ index.html          # 页面入口，挂载 #app
├─ package.json        # 依赖与脚本
├─ vite.config.js      # Vite 配置
└─ src/
   ├─ main.js          # 应用入口：createApp 并挂载
   ├─ App.vue          # 根组件
   └─ components/      # 存放子组件

启动开发服务器

执行：

npm run dev

看到 "Local: http://localhost:5173/" 后，用浏览器打开，出现 Vue 欢迎页表示环境就绪。修改 .vue 文件保存，页面会热更新，无需手动刷新。

清空示例代码

把 App.vue 与 components 里的示例内容删掉，换成最简骨架：

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

const tasks = ref([])   // 任务列表，下一节填充业务逻辑
</script>

<template>
  <h1>任务管理系统</h1>
</template>

小结

环境搭建完成，工程可以正常运行并热更新。下一节开始写真正的业务：添加、删除与完成状态切换。