跳到主要内容

快速开始

创建新项目​

npx @evjs/create-app my-app
cd my-app && npm install

两个参数都是可选的 —— 省略时 CLI 会交互式提示。

可用模板​

模板描述
basic-csr仅客户端渲染，无服务端函数
basic-server-fns最小化的 "use server" 服务端函数
configured-server-fns带 ev.config.ts + Query 代理的服务端函数
complex-routing参数、搜索、布局、加载器、嵌套路由
with-tailwind通过插件加载器使用 Tailwind CSS

开发​

ev dev

浏览器将自动打开 http://localhost:3000，支持热模块替换。*.server.ts 文件中的服务端函数会被自动发现 —— 无需配置。

生产构建​

ev build

项目结构​

my-app/
├── index.html              # HTML 模板（必须包含 <div id="app">）
├── ev.config.ts            # 可选配置
├── src/
│   ├── main.tsx            # 应用启动
│   ├── global.ts           # 全局类型声明和传输初始化
│   ├── pages/              # 路由页面（基于文件的路由）
│   │   ├── __root.tsx      # 根布局
│   │   └── home.tsx        # 首页（索引路由）
│   └── api/                # 服务端函数文件
│       └── *.server.ts
├── package.json
└── tsconfig.json

应用启动代码​

// src/main.tsx
import { createApp } from "@evjs/client";
import { rootRoute } from "./pages/__root";
import { homeRoute } from "./pages/home";
import "./global";

const routeTree = rootRoute.addChildren([homeRoute]);
const app = createApp({ routeTree });
app.render("#app");
// src/global.ts
import { initTransport } from "@evjs/client";

declare module "@tanstack/react-router" {
  interface Register {
    router: any;
  }
}

包列表​

包用途
@evjs/cliCLI 命令行工具 (ev dev, ev build)
@evjs/ev配置、插件和构建器类型 (defineConfig)
@evjs/create-app项目脚手架 (npx @evjs/create-app)
@evjs/client客户端运行时（React + TanStack）
@evjs/server服务端运行时（Hono）
@evjs/build-tools服务端函数转换
@evjs/bundler-webpackWebpack 适配器
@evjs/manifest共享 Manifest Schema

必需依赖​

{
  "dependencies": {
    "@evjs/client": "0.0.0",
    "@evjs/server": "0.0.0",
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
  },
  "devDependencies": {
    "@evjs/cli": "*",
    "@types/react": "^19.0.0",
    "@types/react-dom": "^19.0.0",
    "typescript": "^6.0.2"
  }
}

重要规则​

  • 配置文件：ev.config.ts（不是 evjs.config.ts）
  • 从 @evjs/ev 导入 defineConfig，不是从 @evjs/server
  • HTML 必须包含 <div id="app"> 作为渲染目标
  • 不要在你的项目 package.json 中添加 "type": "module" —— 服务端 bundle 使用 CJS 格式
  • src/main.tsx 应保持精简 —— 在 pages/ 中定义路由