Generouted项目安装与配置指南

Generouted项目安装与配置指南

generouted Generated file-based routes for Vite 项目地址: https://gitcode.com/gh_mirrors/ge/generouted

1. 项目基础介绍

Generouted 是一个开源项目，旨在为 Vite 提供文件基础的路由解决方案。它允许开发者通过文件系统来定义应用的路由，支持多种框架和路由库，如 React Router 和 Solid Router。该项目主要使用 TypeScript 编程语言。

2. 关键技术和框架

• Vite: 一个现代化的前端构建工具，提供快速的开发服务器启动和富有弹性的构建。
• React Router / @tanstack/router / @solidjs/router: 支持多种路由库，以适应不同的项目需求。
• TypeScript: 提供类型安全，帮助在编译阶段捕捉错误。

3. 安装和配置

准备工作

在开始安装 Generouted 之前，请确保你已经具备以下条件：

• Node.js 环境（建议版本 >= 14.18.0）
• Vite 项目（如果尚未创建，请参照 Vite 官方文档进行初始化）

安装步骤

步骤 1: 安装依赖

首先，将 Generouted 和你选择的路由库作为依赖项添加到你的 Vite 项目中。这里以 React Router 为例：

pnpm add @generouted/react-router react-router

步骤 2: 配置 Vite

接下来，需要在你的 vite.config.ts（或 vite.config.js）文件中配置 Vite 来使用 Generouted。以下是一个基础的配置示例：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import generouted from '@generouted/react-router/plugin';

export default defineConfig({
  plugins: [
    react(),
    generouted()
  ]
});

步骤 3: 使用路由

在你的项目主文件 src/main.tsx 中，设置路由组件：

import { createRoot } from 'react-dom/client';
import { Routes } from '@generouted/react-router';

createRoot(document.getElementById('root')!).render(<Routes />);

步骤 4: 添加页面

为了添加页面，你需要在 src/pages 目录下创建对应的 .tsx 文件。例如，创建一个首页：

src/pages/index.tsx

文件内容如下：

export default function Home() {
  return <h1>Home</h1>;
}

按照这样的方式，你可以继续添加更多的页面文件到 src/pages 目录中。

步骤 5: 运行项目

最后，启动 Vite 开发服务器：

pnpm run dev

现在，你的 Generouted 路由配置应该已经就绪，可以通过浏览器访问你的应用了。

请遵循以上步骤进行安装和配置，开始使用 Generouted 为你的 Vite 项目带来文件基础路由的便利。

generouted Generated file-based routes for Vite 项目地址: https://gitcode.com/gh_mirrors/ge/generouted