入门指南

使用 Solid 最简单的方法是使用 SolidStart 启动器。SolidStart 是一组可用于快速创建新 Solid 应用程序的模板。

1. 安装SolidStart

为新应用程序创建目录后，您可以使用以下命令初始化 SolidStart：

2. 选择模板

运行上述命令时，SolidStart 将提示为新应用程序选择模板。您可以在 SolidStart 仓库中查看这些选项的列表。

? Which template do you want to use? › - Use arrow-keys. Return to submit.
❯   bare
    hackernews
    with-auth
    with-mdx
    with-tailwindcss
    with-vitest

按照提示，系统会询问您是否要使用服务器端渲染和 TypeScript。选择您想要的选项以继续。

3. 安装依赖项

选择模板和配置选项后，您可以导航到创建的目录并运行以下命令来安装依赖项：

此命令完成后，您的新 SolidStart 应用程序就准备就绪了！

4. 运行您的应用程序

要在本地运行应用程序，您可以使用以下命令：

你的应用现在应该本地运行在 3000 端口上。你可以通过访问http://localhost:3000 来查看它。

项目文件

SolidStart 将为你的项目创建一个新目录，并填充必要的文件和目录以帮助你开始。这些文件和目录是 SolidStart 应用的基本结构，你可以根据需要修改它们。SolidStart 应用的默认结构如下：

public/
src/
├── routes/
│   ├── index.tsx
├── entry-client.tsx
├── entry-server.tsx
├── app.tsx

注意: 根据您创建项目时选择的配置选项，您的文件结构可能略有不同。例如，如果您选择使用 JavaScript 而不是 TypeScript，您的文件扩展名将是 .jsx 而不是 .tsx。

此结构中的每个目录和文件在您的 SolidStart 应用程序中都有特定用途：

• public/ - 包含应用程序的公开可访问资源。这里应该放置图片、字体和其他您希望公众可以访问的文件。
• src/ - 存放您的 Start 应用程序代码的地方。在代码中导入时别名为 ~/。.
• src/routes/ - 任何文件或页面都将位于此目录中。您可以在路由章节了解更多routes 文件夹的信息。
• src/entry-client.tsx - 这个文件用于在客户端（浏览器中）加载和水合（hydrate）应用程序的 JavaScript。在大多数情况下， 您不需要修改此文件。
• src/entry-server.tsx - 这个文件将处理服务器上的请求。与 entry-client.tsx 一样，在大多数情况下您不需要修改此文件。
• app.tsx - 这是您的应用程序在客户端和服务器渲染中的 HTML 根。您可以将其视为应用程序渲染的外壳。