Menyediakan Vite dengan TypeScript untuk Senarai Tugasan Mudah-tutorial js-php.cn

Menyediakan Vite dengan TypeScript untuk Senarai Tugasan Mudah

Susan Sarandon

Lepaskan： 2025-01-17 04:31:08

asal

606 orang telah melayarinya

Setting up Vite with TypeScript for a Simple To-Do List

Tutorial ini membimbing anda membuat apl senarai tugasan asas menggunakan Vite dan TypeScript. Kami akan memastikan perkara itu mudah, memfokuskan pada fungsi teras Vite tanpa rangka kerja atau perpustakaan luaran.

Persediaan Projek

Pastikan Node.js dan npm dipasang. Kemudian, gunakan terminal anda untuk mencipta dan memulakan projek:

<code class="language-bash"># Create a new Vite project
npm create vite@latest my-todo-app -- --template vanilla-ts

# Navigate to the project directory
cd my-todo-app

# Install dependencies
npm install

# Open in your code editor
code .</code>

Salin selepas log masuk

Ini mencipta my-todo-app, projek Vite menggunakan templat vanilla-ts, sesuai untuk aplikasi TypeScript yang ringkas. Selepas memasang kebergantungan, buka projek dalam editor kod pilihan anda.

Struktur Projek

Direktori projek anda akan mempunyai struktur ini:

<code>my-todo-app/
├── node_modules/
├── public/
│   └── vite.svg
├── src/
│   ├── main.ts
│   └── style.css
├── index.html
├── package.json
├── tsconfig.json
├── vite.config.ts
└── package-lock.json</code>

Salin selepas log masuk

src/main.ts mengandungi logik aplikasi anda, public/ memegang aset statik dan index.html ialah titik masuk. package.json mengurus tanggungan.

Mengubah suai src/main.ts

Ganti kandungan src/main.ts dengan kod ini:

<code class="language-typescript">interface Todo {
  id: number;
  text: string;
  completed: boolean;
}

let todos: Todo[] = [];
let nextTodoId = 1;

const todoInput = document.createElement('input');
todoInput.type = 'text';
todoInput.placeholder = 'Enter a new todo';

const addButton = document.createElement('button');
addButton.textContent = 'Add Todo';

const todoList = document.createElement('ul');

document.body.appendChild(todoInput);
document.body.appendChild(addButton);
document.body.appendChild(todoList);

function renderTodos() {
  todoList.innerHTML = '';
  todos.forEach(todo => {
    const listItem = document.createElement('li');
    const checkbox = document.createElement('input');
    checkbox.type = 'checkbox';
    checkbox.checked = todo.completed;
    checkbox.addEventListener('change', () => toggleTodo(todo.id));

    const label = document.createElement('label');
    label.textContent = todo.text;
    label.style.textDecoration = todo.completed ? 'line-through' : 'none';

    const deleteButton = document.createElement('button');
    deleteButton.textContent = 'Delete';
    deleteButton.addEventListener('click', () => deleteTodo(todo.id));

    listItem.appendChild(checkbox);
    listItem.appendChild(label);
    listItem.appendChild(deleteButton);
    todoList.appendChild(listItem);
  });
}

function addTodo() {
  const text = todoInput.value.trim();
  if (text) {
    const newTodo: Todo = {
      id: nextTodoId++,
      text: text,
      completed: false,
    };
    todos.push(newTodo);
    todoInput.value = '';
    renderTodos();
  }
}

function toggleTodo(id: number) {
  todos = todos.map(todo =>
    todo.id === id ? { ...todo, completed: !todo.completed } : todo
  );
  renderTodos();
}

function deleteTodo(id: number) {
  todos = todos.filter(todo => todo.id !== id);
  renderTodos();
}

addButton.addEventListener('click', addTodo);

renderTodos();</code>

Salin selepas log masuk

Kod TypeScript ini melaksanakan fungsi teras senarai tugasan: menambah, melengkapkan dan memadamkan tugasan.

Mengubah suai index.html

Kemas kini index.html dengan kandungan ini:

<code class="language-html"><!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + TS To-Do</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html></code>

Salin selepas log masuk

Ini hanya termasuk skrip main.ts. Paparan sebenar berlaku secara dinamik dalam JavaScript.

Menjalankan Pelayan Pembangunan dan Bangunan

Jalankan npm run dev untuk memulakan pelayan pembangunan (boleh diakses di http://localhost:5173). Untuk binaan pengeluaran, gunakan npm run build. Ini mencipta versi sedia pengeluaran dalam folder dist.

Panduan diperkemas ini menyediakan laluan yang jelas untuk membina aplikasi senarai tugasan yang mudah menggunakan Vite dan TypeScript. Anda boleh mengembangkan asas ini dengan menyepadukan rangka kerja UI atau penggayaan tambahan mengikut keperluan.

Atas ialah kandungan terperinci Menyediakan Vite dengan TypeScript untuk Senarai Tugasan Mudah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!