新手从零搭建的Vue3 + TypeScript项目

# 使用 npm
npm create vue@latest
# 或使用 pnpm（推荐）
pnpm create vue@latest
# 或使用 yarn
yarn create vue@latest

# 1. 输入项目名称（比如：vue3-ts-todo）
√ Project name: vue3-ts-todo
# 2. 是否使用 TypeScript？选 Yes（核心）
√ Add TypeScript? Yes
# 3. 是否使用 JSX？选 No（练手先不涉及）
√ Add JSX Support? No
# 4. 是否添加 Vue Router？选 Yes（路由是基础）
√ Add Vue Router for Single Page Application development? Yes
# 5. 是否添加 Pinia？选 Yes（状态管理，替代 Vuex）
√ Add Pinia for state management? Yes
# 6. 是否添加 Vitest？选 No（测试先不涉及）
√ Add Vitest for Unit Testing? No
# 7. 是否添加 Cypress？选 No
√ Add Cypress for both Unit and End-to-End testing? No
# 8. 是否添加 ESLint？选 Yes（代码规范）
√ Add ESLint for code quality? Yes
# 9. 是否添加 Prettier？选 No（练手简化）
√ Add Prettier for code formatting? No
# 10. 是否跳过示例代码选项？选 No（练手简化）
选 No：会保留官方示例代码，方便你参考结构，同时可以逐步替换成自己的 TodoList 功能，降低上手难度。
选 Yes：会生成完全空白的项目，需要自己从零搭建所有文件，更适合有一定经验的开发者。

# 进入项目目录
cd vue3-ts-todo
# 安装依赖（用 npm/pnpm/yarn 都可以）
npm install
# 或 pnpm install
# 或 yarn install

npm run dev
# 或 pnpm dev
# 或 yarn dev

vue3-ts-todo/
├── src/
│   ├── components/       # 组件目录（重点写 TS 组件）
│   ├── router/           # 路由配置（TS 版）
│   │   └── index.ts      # * 路由入口（TS 语法）
│   ├── stores/           # Pinia 状态管理（TS 版）
│   │   └── counter.ts    # * 示例仓库（可替换为 Todo 仓库）
│   ├── views/            # 页面组件（TS 版）
│   │   ├── AboutView.vue
│   │   └── HomeView.vue
│   ├── App.vue           # * 根组件（TS 语法）
│   ├── main.ts           # * 入口文件（TS 语法）
│   └── types/            # （手动新建）全局类型定义目录
├── package.json
├── tsconfig.json         # * TS 配置文件（核心）
└── vite.config.ts        # Vite 配置（TS 版）

# app.vue
<template>
  <!-- 模板区域 -->
  <div id="app">
    <router-view />
  </div>
</template>
 
<script setup lang="ts">
// 脚本区域
</script>
 
<style scoped>
/* 样式区域 */
}
</style>

// src/types/todo.ts
// 定义单个待办项的类型
export interface Todo {
  id: number;        // 唯一标识
  content: string;   // 待办内容
  isCompleted: boolean; // 是否完成
}

// 定义 Pinia 仓库的状态类型
export interface TodoState {
  todoList: Todo[];  // 待办列表
}

// src/stores/todo.ts
import { defineStore } from 'pinia'
import type { Todo, TodoState } from '@/types/todo'

// 定义 Todo 仓库（TS 版）
export const useTodoStore = defineStore('todo', {
  // 状态：指定类型为 TodoState
  state: (): TodoState => ({
    todoList: [
      // 初始示例数据
      { id: 1, content: '学习 Vue3 + TS', isCompleted: false },
      { id: 2, content: '实现 TodoList', isCompleted: true }
    ]
  }),

  // 方法：操作待办数据（TS 约束参数/返回值）
  actions: {
    // 添加待办
    addTodo(content: string): void {
      if (!content.trim()) return
      const newTodo: Todo = {
        id: Date.now(), // 用时间戳做唯一 ID
        content,
        isCompleted: false
      }
      this.todoList.push(newTodo)
    },

    // 删除待办
    deleteTodo(id: number): void {
      this.todoList = this.todoList.filter(todo => todo.id !== id)
    },

    // 切换待办完成状态
    toggleTodo(id: number): void {
      const todo = this.todoList.find(todo => todo.id === id)
      if (todo) {
        todo.isCompleted = !todo.isCompleted
      }
    }
  }
})

<template>
  <div class="todo-container">
    <h2>Vue3 + TS 待办事项</h2>
    
    <!-- 添加待办 -->
    <div class="todo-add">
      <input
        v-model="inputValue"
        placeholder="请输入待办内容"
        @keyup.enter="handleAddTodo"
        class="todo-input"
      />
      <button @click="handleAddTodo" class="add-btn">添加</button>
    </div>

    <!-- 待办列表 -->
    <ul class="todo-list">
      <li 
        v-for="todo in todoStore.todoList" 
        :key="todo.id"
        :class="{ completed: todo.isCompleted }"
      >
        <input
          type="checkbox"
          :checked="todo.isCompleted"
          @change="todoStore.toggleTodo(todo.id)"
        />
        <span>{{ todo.content }}</span>
        <button @click="todoStore.deleteTodo(todo.id)" class="del-btn">删除</button>
      </li>
    </ul>

    <!-- 空列表提示 -->
    <div v-if="todoStore.todoList.length === 0" class="empty-tip">
      暂无待办事项，添加一个吧～
    </div>
  </div>
</template>

<script setup lang="ts">
// 1. 导入 Pinia 仓库
import { useTodoStore } from '@/stores/todo'
// 2. 导入 Vue 响应式 API（TS 自动推导类型）
import { ref } from 'vue'

// 3. 初始化仓库
const todoStore = useTodoStore()

// 4. 响应式数据（TS 注解：字符串类型）
const inputValue = ref<string>('')

// 5. 方法（TS 约束：无参数、无返回值）
const handleAddTodo = (): void => {
  todoStore.addTodo(inputValue.value)
  // 清空输入框
  inputValue.value = ''
}
</script>

<style scoped>
.todo-container {
  width: 500px;
  margin: 50px auto;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 8px;
}
.todo-add {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}
.todo-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
}
.add-btn {
  padding: 8px 16px;
  background: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.todo-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.todo-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-bottom: 1px solid #eee;
}
.todo-list li.completed span {
  text-decoration: line-through;
  color: #999;
}
.del-btn {
  margin-left: auto;
  padding: 4px 8px;
  background: #ff4444;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}
.empty-tip {
  text-align: center;
  color: #999;
  padding: 20px;
}
</style>

<template>
  <main>
    <TodoList />
  </main>
</template>

<script setup lang="ts">
import TodoList from '@/components/TodoList.vue'
</script>

<style scoped>
main {
  padding: 1rem;
}
</style>

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

// TS 约束路由类型（Vue Router 内置）
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      // 懒加载组件（TS 自动识别类型）
      component: () => import('../views/AboutView.vue')
    }
  ]
})

export default router

npm run dev