1.02 项目初始化和基础设置

当然可以。我理解您希望一个更详细、更全面的项目计划。让我们从第 1 部分”项目初始化和基础设置”开始，将其细化为更具体的步骤。

第 1 部分：项目初始化和基础设置（3 天）

Day 1: 项目初始化和依赖安装

安装 Bun 运行时

curl -fsSL https://bun.sh/install | bash

创建项目目录并初始化

mkdir lightweight-todo-pro
cd lightweight-todo-pro
bun init

安装核心依赖

bun add elysia @elysiajs/html @elysiajs/static @elysiajs/jwt @elysiajs/cookie
bun add drizzle-orm @libsql/client
bun add htmx.org
bun add -d unocss
bun add eta

安装开发依赖

bun add -d typescript @types/node eslint prettier
bun add -d @typescript-eslint/parser @typescript-eslint/eslint-plugin

初始化 TypeScript 配置
```
bunx tsc --init
```

创建基本的项目结构

mkdir -p src/{controllers,models,services,views,public/{styles,js},utils,middleware,routes}
mkdir drizzle tests
touch src/app.ts README.md

Day 2: 配置文件设置

配置 tsconfig.json

{
  "compilerOptions": {
    "target": "ES2021",
    "module": "ESNext",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "strict": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "outDir": "./dist",
    "rootDir": "./src",
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

创建 .eslintrc.js

module.exports = {
  parser: '@typescript-eslint/parser',
  extends: [
    'plugin:@typescript-eslint/recommended',
  ],
  parserOptions: {
    ecmaVersion: 2021,
    sourceType: 'module',
  },
  rules: {
    // 自定义规则
  },
};

创建 .prettierrc

{
  "singleQuote": true,
  "trailingComma": "es5",
  "printWidth": 100,
  "tabWidth": 2,
  "semi": true
}

配置 package.json 脚本

{
  "scripts": {
    "start": "bun run src/app.ts",
    "dev": "bun run --watch src/app.ts",
    "build": "bun build ./src/app.ts --outdir ./dist",
    "lint": "eslint . --ext .ts",
    "format": "prettier --write \"src/**/*.ts\"",
    "test": "bun test"
  }
}

创建 .env 文件和 .env.example

DATABASE_URL=libsql://your-database.turso.io
JWT_SECRET=your-secret-key

配置 UnoCSS (uno.config.ts)

import { defineConfig } from 'unocss'
 
export default defineConfig({
  // 自定义主题
  theme: {
    colors: {
      primary: '#3490dc',
      secondary: '#ffed4a',
      danger: '#e3342f',
   },
  },
  // 自定义快捷方式
  shortcuts: {
    'btn': 'py-2 px-4 font-semibold rounded-lg shadow-md',
    'btn-primary': 'btn bg-primary text-white',
  },
  // 安全列表
  safelist: 'btn btn-primary'.split(' '),
})

Day 3: 基础应用设置

设置基本的 src/app.ts

import { Elysia } from 'elysia';
import { html } from '@elysiajs/html';
import { staticPlugin } from '@elysiajs/static';
import { jwt } from '@elysiajs/jwt';
import { cookie } from '@elysiajs/cookie';
import { config } from './config';
 
const app = new Elysia()
  .use(html())
  .use(staticPlugin())
  .use(jwt({ secret: config.jwtSecret }))
  .use(cookie())
  .get('/', () => 'Hello, LightweightTodo Pro!')
  .listen(3000);
 
console.log(`🚀 Server is running at ${app.server?.hostname}:${app.server?.port}`);

创建配置文件 src/config.ts

import { config as dotenvConfig } from 'dotenv';
 
dotenvConfig();
 
export const config = {
  databaseUrl: process.env.DATABASE_URL!,
  jwtSecret: process.env.JWT_SECRET!,
  environment: process.env.NODE_ENV || 'development',
};

设置数据库连接 src/db.ts

import { createClient } from '@libsql/client';
import { drizzle } from 'drizzle-orm/libsql';
import { config } from './config';
 
const client = createClient({ url: config.databaseUrl });
export const db = drizzle(client);

创建基本的布局模板 src/views/layout.eta

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>LightweightTodo Pro</title>
  <script src="https://unpkg.com/htmx.org@1.9.6"></script>
  <link rel="stylesheet" href="/styles/main.css">
</head>
<body>
  <header>
    <!-- 添加导航栏 -->
  </header>
  <main>
    <%~ it.body %>
  </main>
  <footer>
    <!-- 添加页脚 -->
  </footer>
</body>
</html>

设置基本的路由结构 src/routes/index.ts

import { Elysia } from 'elysia';
import todoRoutes from './todoRoutes';
import authRoutes from './authRoutes';
 
const routes = new Elysia()
  .use(todoRoutes)
  .use(authRoutes);
 
export default routes;

创建一个简单的中间件 src/middleware/errorHandler.ts

import { Elysia } from 'elysia';
 
export const errorHandler = new Elysia()
  .onError(({ code, error, set }) => {
    console.error(`Error: ${code}`, error);
    set.status = code === 'NOT_FOUND' ? 404 : 500;
    return { error: error.message };
  });

这个详细的第 1 部分计划涵盖了项目的初始化、依赖安装、配置文件设置和基础应用结构的创建。它为接下来的开发阶段奠定了坚实的基础，包括了现代 Web 开发中常用的最佳实践和工具配置。

在接下来的部分中，我们将继续深入到更具体的功能实现，如数据模型设计、认证系统、高级 Todo 功能等。每个部分都会保持这种详细的水平，确保您有一个全面且实用的项目计划。

Woodman's Second Brain | 第二大脑

探索

1.02 项目初始化和基础设置

关系图谱

反向链接