# Deno 前端开发 ## 概述该技能涵盖使用 Fresh（Deno 的 Web 框架）、Preact（轻量级 React 替代方案）和 Tailwind CSS 进行 Deno 前端开发。 Fresh 使用“孤岛架构”，页面在服务器上呈现，只有交互部分将 JavaScript 发送到浏览器。 ## 何时使用此技能 * 创建一个新的 Fresh Web 应用程序 * 构建交互式UI组件（岛） * 添加服务器渲染的页面和路由 * 集成 Tailwind CSS 进行样式设置 * 在孤岛（客户端）与组件（仅服务器）之间进行选择 * 使用 Preact 钩子和信号在 Deno 中构建 Web 应用程序时应用这些实践。 ## 新框架参考： Fresh 是 Deno 的 Web 框架。它使用 **孤岛架构** \- 页面在服务器上呈现，只有交互部分（“孤岛”）在客户端获取 JavaScript。 ### 创建一个新项目 deno run -Ar jsr:@fresh/init cd 我的项目 deno 任务 dev # 运行在 http://127.0.0.1:5173/ ### 项目结构我的项目/ ├── deno.json # 配置和依赖 ├── main.ts # 入口点 ├── fresh.gen.ts # 自动生成的清单（不要编辑） ├──routes/ # 页面和API路由 │ ├── _app.tsx # 应用程序布局包装器 │ ├── index.tsx # 主页 (/) │ └── api/ # API 路由 ├── island/ # 交互组件（在客户端水合） │ └── 计数器.tsx ├── Components/ # 仅服务器组件（不附带 JS） │ └── 按钮.tsx └── static/ # 静态资源 ### 关键概念 **路线（`routes/`文件夹）** * 基于文件的路由： `routes/about.tsx` → `/about` * 动态路由： `routes/blog/[slug].tsx` → `/blog/my-post` * API 路由： `routes/api/users.ts` 导出处理程序 **布局（`_app.tsx`）** 从“jsr:@fresh/core”导入{ PageProps }；导出默认函数 App({ Component }: PageProps) { 返回（ <头> <标题>我的应用程序 <正文> <组件/> ）； } **异步服务器组件** 导出默认异步函数 Page() { const data = 等待 fetchData(); // 仅在服务器上运行返回

{data.title}

; } ## 岛屿（交互组件）岛屿是在客户端上进行水合（交互）的组件。将它们放在“islands/”文件夹中。 ### 何时使用岛屿 * 用户交互（点击、表单输入） * 客户端状态（计数器、切换） * 浏览器 API（本地存储、地理定位） ### 岛屿示例 // 岛屿/Counter.tsx 从“@preact/signals”导入{useSignal}；导出默认函数 Counter() { 常量计数 = useSignal(0); 返回（

计数：{count.value}

）； } ### 岛屿规则 1. **Props 必须可序列化** \- 没有函数，只有 JSON 兼容的数据 2. **保持岛屿较小** \- 发送给客户端的 JavaScript 更少 3. **首选服务器组件** \- 仅在需要交互性时才使用岛 ## 预反应 Preact 是 React 的 3KB 替代品。 Fresh 使用 Preact 而不是 React。 ### Preact 与 React 的区别预反应 |反应 ---|--- `class` 有效 |需要“类名” `@preact/信号` | `使用状态` 3KB 捆绑包 | ~40KB 捆绑包 ### Hooks（与 React 相同）从“preact/hooks”导入{ useState、useEffect、useRef }；函数 MyComponent() { const [值，setValue] = useState(0); const inputRef = useRef(null); 使用效果（（）=> { console.log("组件已安装"); }, []); 返回 ; } ### 信号（Preact 的反应状态）信号是 Preact 比 useState 更有效的替代方案：从“@preact/signals”导入{信号，计算}；常量计数 = 信号(0); const doubled = 计算(() => count.value * 2); 函数计数器() { 返回（

计数：{count}

加倍：{加倍}

）； } 信号的好处： * 更精细的更新（仅重新渲染更改的内容） * 可以在外部组件中定义 * 共享状态的更清晰的代码 ## Fresh 中的 Tailwind CSS Fresh 2.0 使用 Vite 进行构建，这意味着 Tailwind 通过 Vite 插件进行集成。 ### 设置在`deno.json`中： { “进口”：{ "@tailwindcss/vite": "npm:@tailwindcss/vite" } } 在`vite.config.ts`中：从“vite”导入{defineConfig}；从“@tailwindcss/vite”导入 tailwindcss；导出默认的defineConfig({ 插件：[tailwindcss()]， }); ### 用法导出默认函数 Button({ Children }) { 返回（

{title}

{title}

Deno 前端

包含技能