Hướng dẫn này sẽ chỉ cho bạn các bước để thiết lập một dự án Vite với TypeScript để tạo một ứng dụng danh sách công việc cơ bản. Chúng ta sẽ giữ cho nó đơn giản và xây dựng ứng dụng này mà không cần sử dụng framework.
Thiết lập dự án
Để bắt đầu, bạn cần cài đặt Node.js và npm trên máy tính của mình. Sau khi cài đặt xong, hãy mở terminal và chạy các lệnh sau để tạo một dự án Vite mới:
# Create a new Vite project
npm create vite@latest my-todo-app -- --template vanilla-ts # Navigate into the project directory
cd my-todo-app # Install dependencies
npm install # Open the project in your code editor
code .
Những lệnh này sẽ thiết lập một thư mục mới có tên my-todo-app với một dự án Vite cơ bản sử dụng TypeScript. Lệnh npm create vite@latest tạo cấu trúc dự án bằng cách sử dụng template vanilla-ts, rất phù hợp với nhu cầu của chúng ta. Sau khi điều hướng vào thư mục và cài đặt các dependencies, bạn có thể mở dự án trong trình soạn thảo mã để bắt đầu làm việc với nó.
Cấu trúc dự án
Sau khi thiết lập dự án, bạn sẽ thấy một cấu trúc như sau:
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
Cấu trúc này bao gồm các tệp cần thiết cho một dự án Vite với TypeScript. Thư mục src chứa tệp TypeScript chính của bạn (main.ts), và thư mục public chứa các tài sản tĩnh như logo Vite. Tệp index.html là điểm vào cho ứng dụng web của bạn, và package.json liệt kê các dependencies và scripts của dự án.
Chỉnh sửa src/main.ts
Tiếp theo, chúng ta cần sửa đổi tệp src/main.ts để bao gồm chức năng danh sách công việc của chúng ta. Hãy thay thế nội dung hiện có bằng đoạn mã sau:
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) return; 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();
Đoạn mã này thiết lập một danh sách công việc đơn giản với khả năng thêm các mục mới, đánh dấu chúng là đã hoàn thành và xóa chúng. Chúng ta sử dụng TypeScript để định nghĩa cấu trúc của các mục công việc và đảm bảo an toàn kiểu trong suốt mã của chúng ta.
Sửa đổi index.html
Bây giờ, chúng ta cần cập nhật tệp index.html để bao gồm mã TypeScript của chúng ta. Thay thế nội dung của index.html bằng nội dung sau:
<!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>
Tệp HTML này đóng vai trò là điểm vào cho ứng dụng của chúng ta. Nó bao gồm một thẻ script trỏ đến tệp main.ts của chúng ta, cho phép mã TypeScript của chúng ta chạy trong trình duyệt.
Chạy máy chủ phát triển
Để xem danh sách công việc của bạn hoạt động, hãy quay lại terminal và chạy lệnh sau:
npm run dev
Lệnh này khởi động máy chủ phát triển Vite, sẽ đóng gói mã của bạn và cung cấp nó tại http://localhost:5173. Mở URL này trong trình duyệt của bạn và bạn sẽ thấy ứng dụng danh sách công việc cơ bản của mình đang hoạt động. Khi bạn đã thực hiện các thay đổi cuối cùng đối với mã và sẵn sàng build ứng dụng, bạn có thể chạy lệnh sau:
npm run build
Lệnh này sẽ tạo bản build production của ứng dụng của bạn trong thư mục dist, nơi tất cả các tệp sẽ được đóng gói và sẵn sàng để phục vụ cho người dùng của bạn.
Kết luận
Như bạn thấy, việc thiết lập Vite với một dự án TypeScript đơn giản rất dễ dàng và có được nhiều chức năng ngay lập tức. Vite lo việc đóng gói, vì vậy bạn không cần phải lo lắng về việc tự thiết lập một quy trình build phức tạp. Tất nhiên, chúng ta có thể phát triển ứng dụng này hơn nữa bằng cách thêm framework UI như React, Vue và các thư viện khác như TailwindCSS để tạo kiểu và hơn thế nữa.
Cảm ơn các bạn đã theo dõi!