# 使用 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（路由是基礎(chǔ)）
√ Add Vue Router for Single Page Application development? Yes
# 5. 是否添加 Pinia？選 Yes（狀態(tài)管理，替代 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（代碼規(guī)范）
√ Add ESLint for code quality? Yes
# 9. 是否添加 Prettier？選 No（練手簡化）
√ Add Prettier for code formatting? No
# 10. 是否跳過示例代碼選項？選 No（練手簡化）
選 No：會保留官方示例代碼，方便你參考結(jié)構(gòu)，同時可以逐步替換成自己的 TodoList 功能，降低上手難度。
選 Yes：會生成完全空白的項目，需要自己從零搭建所有文件，更適合有一定經(jīng)驗的開發(fā)者。

# 進(jìn)入項目目錄
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 狀態(tài)管理（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>
  <!-- 模板區(qū)域 -->
  <div id="app">
    <router-view />
  </div>
</template>
 
<script setup lang="ts">
// 腳本區(qū)域
</script>
 
<style scoped>
/* 樣式區(qū)域 */
}
</style>

// src/types/todo.ts
// 定義單個待辦項的類型
export interface Todo {
  id: number;        // 唯一標(biāo)識
  content: string;   // 待辦內(nèi)容
  isCompleted: boolean; // 是否完成
}

// 定義 Pinia 倉庫的狀態(tài)類型
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', {
  // 狀態(tài)：指定類型為 TodoState
  state: (): TodoState => ({
    todoList: [
      // 初始示例數(shù)據(jù)
      { id: 1, content: '學(xué)習(xí) Vue3 + TS', isCompleted: false },
      { id: 2, content: '實現(xiàn) TodoList', isCompleted: true }
    ]
  }),

  // 方法：操作待辦數(shù)據(jù)（TS 約束參數(shù)/返回值）
  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)
    },

    // 切換待辦完成狀態(tài)
    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="請輸入待辦內(nèi)容"
        @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. 導(dǎo)入 Pinia 倉庫
import { useTodoStore } from '@/stores/todo'
// 2. 導(dǎo)入 Vue 響應(yīng)式 API（TS 自動推導(dǎo)類型）
import { ref } from 'vue'

// 3. 初始化倉庫
const todoStore = useTodoStore()

// 4. 響應(yīng)式數(shù)據(jù)（TS 注解：字符串類型）
const inputValue = ref<string>('')

// 5. 方法（TS 約束：無參數(shù)、無返回值）
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 內(nèi)置）
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