fresh2开发及快速入门（1）

之所以最先使用Fresh 2.0，完全是个人品味问题，我一直想要使用vite的HMR和esm但是又不想用vue，vite的理念是先进并且适合 AI的，但是vue的话就差点意思了。之前的Fresh一直绑定在preact上，最近终于可以使用vite的生态了，可喜可贺，手痒必须要试试。另外，必须要说明的是Fresh 2.0是一个实验性项目，目前还不是正式版本，所以在使用过程中可能会遇到一些问题，但是瑕不掩瑜，Fresh 2.0的理念和架构确实是很有价值的。

群岛架构
vite生态
全栈

满足以上需求的目前也只有Fresh 2.0，我们可以把它现在看做Astro的全栈加强版，所以如果你也想探索一下最适合AI时代的全栈框架，一定要试一下Fresh 2.0

fresh2 启动！#

首先我们需要安装deno

Mac, Linux

curl -fsSL https://deno.land/install.sh | sh

windows PowerShell

iwr https://deno.land/install.ps1 -useb | iex

更多安装方式可以查看 deno_install

deno也有别人开发的版本管理工具类似nvm的dvm，可以按需安装。

npm i @axetroy/dvm

当安装完成后，可以使用deno run 来运行ts,可以运行官方样例，也可以自己写一个

示例代码（点击展开）

// hello.ts
import { serve } from "https://deno.land/std@0.208.0/http/server.ts";

const handler = async (req: Request): Promise<Response> => {
  const html = `
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>欢迎</title>
      <style>
        body {
          font-family: Arial, sans-serif;
          display: flex;
          justify-content: center;
          align-items: center;
          height: 100vh;
          margin: 0;
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .welcome-container {
          text-align: center;
          color: white;
          padding: 40px;
          border-radius: 10px;
          background: rgba(255, 255, 255, 0.1);
          backdrop-filter: blur(10px);
          box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        }
        h1 {
          font-size: 48px;
          margin-bottom: 20px;
        }
        p {
          font-size: 18px;
          margin: 10px 0;
        }
      </style>
    </head>
    <body>
      <div class="welcome-container">
        <h1>欢迎！</h1>
        <p>这是一个使用 Deno 运行的 TypeScript 页面</p>
        <p>当前时间: ${new Date().toLocaleString('zh-CN')}</p>
      </div>
    </body>
    </html>
  `;

  return new Response(html, {
    status: 200,
    headers: {
      "content-type": "text/html; charset=utf-8",
    },
  });
};

console.log("服务器运行在 http://localhost:8000");
await serve(handler, { port: 8000 });

deno hello.ts

deno 启动！

至此基础的环境ok了，下一步我们需要安装fresh 2.0

deno run -Ar jsr:@fresh/init

fresh 2.0 初始化

太棒了，没想到，这个下载的就是vite版的fresh 2.0的环境，下一步我们可以开始开发了。

deno run dev

fresh 2.0 启动

当前的初步已经ok了，如果你对细节还有疑问可以在留言。下一章我将带你使用全栈+Fresh+群岛架构+AI开发一个好玩的游戏。