阅读量:0
Astro 是一个现代化的静态站点生成器和前端框架，它具有独特的设计理念：岛屿架构。它允许开发人员使用组件化的方式构建内容优先的网站，将各种技术栈（如React、Vue、Svelte等）的组件无缝集成到同一个项目中。
1、创建项目：
npm create astro@latest astro-todolist 
cd astro-todolist code . 
创建组件
在 src/components/ 目录下创建 TodoList.astro
--- --- <div id="todo-app"> <h1>TodoList</h1> <form id="todo-form"> <input type="text" id="todo-input" placeholder="Add a new task"> <button type="submit" id="add-button">Add</button> </form> <ul id="todo-list"></ul> </div> <script> const todoForm = document.getElementById('todo-form') as HTMLFormElement; const todoInput = document.getElementById('todo-input') as HTMLInputElement; const todoList = document.getElementById('todo-list') as HTMLUListElement; interface Todo { text: string; completed: boolean; } function loadTodos() { const todosJson = localStorage.getItem('todos'); const todos: Todo[] = todosJson ? JSON.parse(todosJson) : []; todos.forEach(todo => { addTodoToDOM(todo.text, todo.completed); }); } function saveTodos() { const todos: Todo[] = Array.from(todoList.children).map(li => ({ text: li.querySelector('span')?.textContent || '', completed: li.classList.contains('completed') })); localStorage.setItem('todos', JSON.stringify(todos)); } function addTodoToDOM(text: string, completed = false) { const li = document.createElement('li'); li.className = 'todo-item' + (completed ? ' completed' : ''); li.innerHTML = ` <input type="checkbox" ${completed ? 'checked' : ''}> <span>${text}</span> <button class="delete-button">Delete</button> `; const checkbox = li.querySelector('input[type="checkbox"]'); if (checkbox) { checkbox.addEventListener('change', function() { li.classList.toggle('completed'); if (li.classList.contains('completed')) { todoList.appendChild(li); } else { todoList.insertBefore(li, todoList.firstChild); } saveTodos(); }); } const deleteButton = li.querySelector('.delete-button'); if (deleteButton) { deleteButton.addEventListener('click', function() { li.remove(); saveTodos(); }); } if (completed) { todoList.appendChild(li); } else { todoList.insertBefore(li, todoList.firstChild); } } todoForm.addEventListener('submit', function(e: Event) { e.preventDefault(); if (todoInput.value.trim() === '') return; addTodoToDOM(todoInput.value); saveTodos(); todoInput.value = ''; }); document.addEventListener('DOMContentLoaded', loadTodos); </script> <style> body { font-family: Arial, sans-serif; max-width: 500px; margin: 0 auto; padding: 20px; } h1 { text-align: center; } #todo-form { display: flex; margin-bottom: 20px; } #todo-input { flex-grow: 1; padding: 10px; font-size: 16px; border: 1px solid #ddd; border-radius: 4px 0 0 4px; } #add-button { padding: 10px 20px; font-size: 16px; background-color: #4CAF50; color: white; border: none; border-radius: 0 4px 4px 0; cursor: pointer; } #todo-list { list-style-type: none; padding: 0; } .todo-item { display: flex; align-items: center; padding: 10px; background-color: #f9f9f9; border: 1px solid #ddd; margin-bottom: 10px; border-radius: 4px; } .todo-item.completed { text-decoration: line-through; opacity: 0.6; } .todo-item input[type="checkbox"] { margin-right: 10px; } .delete-button { margin-left: auto; background-color: #f44336; color: white; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; } </style> 创建页面
在 src/pages/index.astro 中使用 TodoList 组件:
--- import TodoList from '../components/TodoList.astro'; --- <html lang="en"> <head> <meta charset="utf-8" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <meta name="viewport" content="width=device-width" /> <meta name="generator" content={Astro.generator} /> <title>Astro TodoList</title> </head> <body> <TodoList /> </body> </html> 
2、运行
测试
npm run dev 
构建部署
npm run build npx netlify-cli deploy --prod 
dist下打开网页：
双击静态页面打开
