1.1 Bun环境下，TypeScript、Vite、UnoCSS写一个Todo例程

以下是一个使用 Bun、TypeScript、Vite 和 UnoCSS 创建的简单 Todo 应用示例：

1. 首先，确保你已经安装了 Bun。然后创建一个新项目：

bun create vite todo-app --template vue-ts
cd todo-app

2. 安装必要的依赖：

bun add unocss @unocss/vite

3. 修改 vite.config.ts：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import UnoCSS from 'unocss/vite'
 
export default defineConfig({
  plugins: [vue(), UnoCSS()],
})

4. 创建 uno.config.ts 文件：

import { defineConfig } from 'unocss'
 
export default defineConfig({
  // 可以添加自定义规则或预设
})

5. 修改 src/main.ts：

import { createApp } from 'vue'
import App from './App.vue'
import 'uno.css'
 
createApp(App).mount('#app')

6. 修改 src/App.vue：

<template>
  <div class="p-4 max-w-md mx-auto">
    <h1 class="text-2xl font-bold mb-4">Todo App</h1>
    <form @submit.prevent="addTodo" class="mb-4">
      <input v-model="newTodo" type="text" placeholder="Add a new todo" class="border p-2 mr-2">
      <button type="submit" class="bg-blue-500 text-white p-2 rounded">Add</button>
    </form>
    <ul>
      <li v-for="todo in todos" :key="todo.id" class="flex items-center mb-2">
        <input type="checkbox" v-model="todo.completed" class="mr-2">
        <span :class="{ 'line-through': todo.completed }">{{ todo.text }}</span>
        <button @click="removeTodo(todo.id)" class="ml-auto text-red-500">Remove</button>
      </li>
    </ul>
  </div>
</template>
 
<script lang="ts">
import { defineComponent, ref } from 'vue'
 
interface Todo {
  id: number
  text: string
  completed: boolean
}
 
export default defineComponent({
  name: 'App',
  setup() {
    const newTodo = ref('')
    const todos = ref<Todo[]>([])
 
    const addTodo = () => {
      if (newTodo.value.trim()) {
        todos.value.push({
          id: Date.now(),
          text: newTodo.value,
          completed: false
        })
        newTodo.value = ''
      }
    }
 
    const removeTodo = (id: number) => {
      todos.value = todos.value.filter(todo => todo.id !== id)
    }
 
    return {
      newTodo,
      todos,
      addTodo,
      removeTodo
    }
  }
})
</script>

7. 运行开发服务器：

bun run dev

这个简单的 Todo 应用允许用户添加新的待办事项、标记它们为已完成，以及删除待办事项。它使用了 Vue 3 的组合式 API 和 TypeScript 来定义组件逻辑，并使用 UnoCSS 来快速设置样式。

请注意，这个示例使用了 Vue 3，因为它与 TypeScript 和 Vite 配合得很好。如果你想使用其他框架，如 React，你需要相应地调整代码和配置。