本指南将帮助你创建新的 Vue ↗ 应用，并部署到 Cloudflare Workers（配合新版 Workers Assets）。
使用 create-cloudflare ↗ CLI（C3）设置新项目。C3 会创建新的项目目录，使用官方 Vue 模板中的代码，并提供立即部署的选项。
要使用 create-cloudflare 创建配合 Workers Assets 的新 Vue 项目，请运行以下命令：
npm create cloudflare@latest -- my-vue-app --framework=vueyarn create cloudflare my-vue-app --framework=vuepnpm create cloudflare@latest my-vue-app --framework=vue此项目是如何设置的？
以下是项目的简化文件树。
- my-vue-app
- src/
- App.vue
- server/
- index.ts
- index.html
- vite.config.ts
- wrangler.jsonc
- src/
wrangler.jsonc 是你的 Wrangler 配置文件。
在此文件中：
main指向server/index.ts。这是你的 Worker，将作为后端 API。assets.not_found_handling设置为single-page-application，意味着由 Vue SPA 处理的路由不会进入 Worker，因此免费。- 若要为 Cloudflare 开发者平台资源添加绑定（binding），在此配置。阅读更多关于绑定（binding）的信息。
vite.config.ts 配置为使用 Cloudflare Vite 插件。这会在 Cloudflare Workers 运行时中运行 Worker，确保本地开发环境尽可能接近生产环境。
server/index.ts 是后端 API，包含单个端点 /api/，返回文本响应。
在 src/App.vue 中，Vue 应用调用此端点获取消息并显示。
2. 使用 Cloudflare Vite 插件 在本地开发
创建项目后，在项目目录中运行以下命令以启动本地服务器。这样可以在开发期间本地预览项目。
npm run devyarn run devpnpm run dev本地开发中发生了什么？
此项目使用 Vite 进行本地开发和构建，因此具备
Vite 的所有功能，包括热模块替换（HMR）。此外，
vite.config.ts 配置为使用 Cloudflare Vite
插件。这会在 Cloudflare
Workers 运行时中运行应用，与生产环境一致，并支持访问绑定的本地模拟。
你可以从本地机器或任何 CI/CD 系统（包括 Cloudflare 自有 系统）将项目部署到 *.workers.dev 子域或自定义域名。
以下命令将构建并部署项目。若使用 CI，请确保相应更新你的 「deploy command」 配置。
npm run deployyarn run deploypnpm run deploy若将 Vue 用作 SPA，应在 Wrangler 配置文件中将 not_found_handling = "single_page_application"。
默认情况下，Cloudflare 首先尝试将请求路径与静态资源路径匹配，该路径基于上传资源目录的文件结构。这要么是 Wrangler 配置中 assets.directory 指定的目录，要么在使用 Cloudflare Vite 插件时是客户端构建的输出目录。如果失败，且存在 Worker，则调用 Worker。如果没有 Worker，或者 Worker 随后使用 asset 绑定，Cloudflare 将回退到 not_found_handling 设置的行为。
请参阅路由文档，了解静态资源路由的工作原理以及如何自定义此行为。
新项目还包含位于 ./server/index.ts 的 Worker，可用作 Vue 应用的后端 API。Vue 应用无法直接访问 Workers 绑定（binding），但可以通过此 Worker 与它们交互。你可以从 Vue 应用向 Worker 发起 fetch() 请求，Worker 随后处理请求并使用绑定（binding）。
通过绑定（binding），你的应用程序可以与 Cloudflare Developer Platform 完全集成，让你访问计算、存储、AI 等功能。