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

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

windows PowerShell

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

更多安装方式可以查看 deno_install

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

1
npm i @axetroy/dvm

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

示例代码（点击展开）

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

3
const handler = async (req: Request): Promise<Response> => {
4
  const html = `
5
    <!DOCTYPE html>
6
    <html lang="zh-CN">
7
    <head>
8
      <meta charset="UTF-8">
9
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
10
      <title>欢迎</title>
11
      <style>
12
        body {
13
          font-family: Arial, sans-serif;
14
          display: flex;
15
          justify-content: center;
16
          align-items: center;
17
          height: 100vh;
18
          margin: 0;
19
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
20
        }
21
        .welcome-container {
22
          text-align: center;
23
          color: white;
24
          padding: 40px;
25
          border-radius: 10px;
26
          background: rgba(255, 255, 255, 0.1);
27
          backdrop-filter: blur(10px);
28
          box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
29
        }
30
        h1 {
31
          font-size: 48px;
32
          margin-bottom: 20px;
33
        }
34
        p {
35
          font-size: 18px;
36
          margin: 10px 0;
37
        }
38
      </style>
39
    </head>
40
    <body>
41
      <div class="welcome-container">
42
        <h1>欢迎！</h1>
43
        <p>这是一个使用 Deno 运行的 TypeScript 页面</p>
44
        <p>当前时间: ${new Date().toLocaleString('zh-CN')}</p>
45
      </div>
46
    </body>
47
    </html>
48
  `;
49

50
  return new Response(html, {
51
    status: 200,
52
    headers: {
53
      "content-type": "text/html; charset=utf-8",
54
    },
55
  });
56
};
57

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

1
deno hello.ts

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

1
deno run -Ar jsr:@fresh/init

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

1
deno run dev

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

音乐

音乐

fresh2 启动！#

支持与分享

评论区

音乐

文章目录