Wasp 创建新项目实战从wasp new到wasp start的完整启动流程Todo App 教程第 1 篇【免费下载链接】waspThe batteries-included full-stack framework for the AI era. Develop JS/TS web apps (React, Node.js, and Prisma) using declarative code that abstracts away complex full-stack features like auth, background jobs, RPC, email sending, end-to-end type safety, single-command deployment, and more.项目地址: https://gitcode.com/GitHub_Trending/wa/wasp本篇是 Wasp 官方 Todo 应用教程v0.15的开篇章节聚焦创建新项目这一最关键的第一步。你将学会用wasp new TodoApp快速生成一个全栈应用骨架用wasp start一键启动 React 客户端、Node.js 服务器与数据库并理解main.wasp声明式配置与 JavaScript / TypeScript 双轨开发的核心理念。读完本篇你将具备亲手搭建并运行一个 Wasp 全栈应用的能力为后续教程中页面、实体、查询、操作与认证等进阶功能打下坚实基础。前置条件你需要在本机安装最新版本的 Wasp 才能跟随本教程操作。若尚未安装请先参考 QuickStart 快速开始指南。教程目标一个完整的 Todo 应用本教程的最终目标是用 Wasp 构建一个简单的 Todo 待办应用。在这个过程中我们会逐一带你体验 Wasp 最核心、最实用的功能——从项目创建、目录结构到页面page、路由route、数据实体entity、查询query、操作action以及认证auth。上图展示了应用完成后的运行效果你可以创建任务、勾选完成状态、并配合用户登录使用。而这一切都从一个简单的命令开始。完整应用源码已收录在仓库中可随时对照阅读examples/tutorials/TodoAppJavaScript 版与 examples/tutorials/TodoAppTsTypeScript 版。创建项目wasp new TodoApp在终端中执行以下命令即可初始化一个新的 Wasp 项目$ wasp new TodoAppTodoApp是项目名称它会被同时用作 npm 包名、应用名与目录名。Wasp 的 CLI 会根据内置的 starter 模板为你生成一整套可运行的全栈代码。仓库中的模板资源位于 waspc/data/Cli/starters目前内置了三套 starterminimal最精简的骨架只包含一个主页占位组件、main.wasp.ts、schema.prisma与 Vite 配置适合从零动手实现的教程场景本教程即从该模板出发basic功能更丰富的起步模板自带任务tasks、标签tags、认证auth等示例代码适合直接作为真实项目的起点skeleton面向更进阶自定义的骨架模板。因此如果你希望拿到一个更精简、完全由自己实现的起点也可以显式指定模板$ wasp new TodoApp -t minimal从模板结构看每个 starter 都包含main.wasp.ts应用定义、schema.prisma数据库 Schema、package.json依赖、vite.config.ts构建配置与src/源码目录这正是 Wasp 项目的最小完整形态。启动开发环境wasp start创建完成后进入项目目录并启动开发服务器$ cd TodoApp $ wasp startwasp start是一个一站式开发命令它会同时拉起应用的三个组成部分——客户端基于 Vite 的 React 开发服务器、服务器Node.js 后端与数据库本项目使用 SQLite。首次在新项目中运行时需要一些时间完成依赖安装与代码生成因此你会看到来自这三方的日志消息依次输出。当一切就绪后浏览器会自动打开一个新标签页访问http://localhost:3000呈现一个简单的占位页面不要小看这一屏——Wasp 已经为你生成了完整的前端与后端代码React 客户端、Node.js 服务器、Prisma 数据库客户端以及两者之间端到端的类型安全通信层。从代码结构看wasp start由 waspcWasp 编译器以 Haskell 实现驱动它先读取main.wasp中的声明并生成.wasp/out下的完整工程代码再交由 Vite 与 Node 分别启动前后端进程。生成的项目骨架创建完成后你的项目目录结构大致如下. ├── .gitignore ├── main.wasp # 你的 Wasp 代码应用声明写在这里 ├── schema.prisma # 你的 Prisma 数据库 Schema 写在这里 ├── package.json # 依赖与项目信息写在这里 ├── public # 静态资源图片、favicon 等 ├── src # 你的源码TS/JS/CSS写在这里 │ ├── Main.css │ ├── MainPage.jsx │ ├── vite-env.d.ts │ └── waspLogo.png ├── tsconfig.json ├── vite.config.ts ├── .waspignore └── .wasproot这里所说的你的代码指的是你亲手编写的代码与 Wasp 自动生成的代码相对。Wasp 对你如何组织代码几乎没有限制——不需要刻意把客户端代码与服务器端代码分开存放一般建议按功能feature纵向组织目录不过本教程文件较少统一放在根级src目录即可。其余文件各有分工tsconfig.json、vite-env.d.ts、.wasproot等文件帮助 Wasp 与 IDE 提供自动补全、IntelliSense 与错误提示vite.config.ts用于配置 Vite——Wasp 的构建工具本教程不会改动它若想深入定制可参考 自定义 Vite 配置文档schema.prisma用于定义数据库结构后续教程会展开讲解而整个项目最重要的文件是main.wasp。main.wasp声明式应用定义main.wasp是应用的定义文件Wasp 的所有魔法都源于它——根据其中的声明Wasp 会为你生成数据库、客户端-服务器通信、React 路由等大量样板代码。文件本身是一系列声明declarations每一条声明定义应用的一个组成部分。wasp new生成的默认main.wasp如下app TodoApp { wasp: { version: ^0.15.0 // 锁定要使用的 Wasp 版本 }, title: TodoApp // 用作浏览器标签页标题。注意Wasp 中所有字符串都必须使用双引号 } route RootRoute { path: /, to: MainPage } page MainPage { // 指定页面的 React 实现从 src/MainPage.jsx 导出。 // 该语句使用标准 JS 导入语法用 src 引用 src 目录内的文件。 component: import { MainPage } from src/MainPage }这里用到了三种声明类型声明作用app应用的顶层配置信息如 Wasp 版本锁定、浏览器标题等route描述每个页面应从哪个 URL 路径访问如根路径/page定义一个网页以及页面加载时要渲染的 React 组件route与page配合工作route决定路径page决定渲染什么。当你添加更多页面时只需要新增相应的route与page声明Wasp 会自动完成 React Router 的配置与代码生成。值得注意的是声明式配置不止存在于旧版的main.wasp文件中。从源码结构看当前仓库已演进出TypeScript 版的 Wasp 配置main.wasp.ts例如 minimal 模板的 main.wasp.ts 使用wasp.sh/spec的app、route、page等函数来声明应用import { app, page, route } from wasp.sh/spec; import { MainPage } from ./src/MainPage with { type: ref }; export default app({ name: __waspAppName__, wasp: { version: __waspVersion__ }, title: __waspProjectName__, head: [link relicon href/favicon.ico /], spec: [ route(RootRoute, /, page(MainPage)), ], });无论使用.wasp还是.wasp.ts形式声明式思想是一致的你描述要什么Wasp 生成怎么做。语言支持JavaScript 与 TypeScript 双轨Wasp 开箱即用地同时支持JavaScript与TypeScript你可以在项目中自由选择、甚至可以混用两者。默认模板使用 JavaScript主页组件为src/MainPage.jsx想切换到 TypeScript 时只需把src/MainPage.jsx重命名为src/MainPage.tsx并重启wasp start即可无需改动main.wasp——语言选择与配置文件完全解耦官方文档对每段代码都提供 JS / TS 双版本代码块上带有语言切换开关且站点会记住你的偏好。以仓库中的完整示例为证JavaScript 版 MainPage.jsx 与 TypeScript 版 MainPage.tsx 结构一一对应都通过wasp/client/operations导入useQuery、createTask等全栈操作。也就是说同样的应用逻辑可以无缝以两种语言编写。下一步至此你已经成功创建并启动了第一个 Wasp 项目理解了项目骨架与main.wasp声明式配置的核心思想。在下一篇中我们将深入剖析 Wasp 生成的代码结构进一步理解route与page如何协同构建 Web 应用请继续阅读 第 2 篇项目结构。【免费下载链接】waspThe batteries-included full-stack framework for the AI era. Develop JS/TS web apps (React, Node.js, and Prisma) using declarative code that abstracts away complex full-stack features like auth, background jobs, RPC, email sending, end-to-end type safety, single-command deployment, and more.项目地址: https://gitcode.com/GitHub_Trending/wa/wasp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考