← Cloudflare Workers / workers / framework-guides / web-apps

Vue

V tomto průvodci vytvoříte nový Vue ↗ aplikaci a nasaďte ji na Cloudflare Workers (s novým Workers Assets).

1. Nastavte nový projekt

Použijte create-cloudflare ↗ CLI (C3) pro nastavení nového projektu. C3 vytvoří nový adresář projektu, použije kód z oficiální šablony Vue a nabídne možnost okamžitého nasazení.

Chcete-li použít create-cloudflare pro vytvoření nového projektu Vue s Workers Assets spusťte následující příkaz:

npm create cloudflare@latest -- my-vue-app --framework=vue

Jak je tento projekt nastaven?

Níže je zjednodušený strom souborů projektu.

my-vue-app
- src/
  - App.vue
- server/
  - index.ts
- index.html
- vite.config.ts
- wrangler.jsonc

wrangler.jsonc je vaše Konfigurační soubor Wrangler. V tomto souboru:

main odkazuje na server/index.ts. Toto je váš Worker, který bude sloužit jako vaše backendové API.
assets.not_found_handling je nastaveno na single-page-application, což znamená, že trasy obsluhované vaší Vue SPA aplikací se k Workeru vůbec nedostanou, a jsou tedy zdarma.
Pokud chcete přidat bindings k prostředkům na vývojářské platformě Cloudflare, nakonfigurujete je zde. Více informací najdete v vazby.

vite.config.ts je nastaven tak, aby používal Cloudflare Vite plugin. Tím se váš Worker spustí v runtime Cloudflare Workers, takže lokální vývojové prostředí co nejvíce odpovídá produkci.

server/index.ts je vaše backendové API, které obsahuje jediný endpoint, /api/, která vrací textovou odpověď. Na src/App.vue, vaše aplikace Vue zavolá tento endpoint, získá zprávu a zobrazí ji.

2. Vyvíjejte lokálně pomocí Cloudflare Vite plugin

Jakmile vytvoříte projekt, spusťte v jeho adresáři následující příkaz, který spustí lokální server. Díky tomu si budete moci projekt během vývoje prohlížet lokálně.

npm run dev

Co se děje při lokálním vývoji?

Tento projekt používá pro lokální vývoj a build Vite, a proto obsahuje všechny funkce Vite včetně hot module replacement (HMR). Kromě toho vite.config.ts je nastaven tak, aby používal Cloudflare Vite plugin. Tím se vaše aplikace spustí v runtime Cloudflare Workers stejně jako v produkci a zpřístupní se lokální emulace bindingů.

3. Nasaďte svůj projekt

Váš projekt lze nasadit na *.workers.dev subdoména nebo Custom Domain, z vlastního počítače nebo z libovolného systému CI/CD, včetně vlastní od Cloudflare.

Následující příkaz sestaví a nasadí váš projekt. Pokud používáte CI, nezapomeňte aktualizovat "deploy command" konfiguraci podle potřeby.

npm run deploy

Směrování Assets

Pokud používáte Vue jako SPA, budete chtít nastavit not_found_handling = "single_page_application" ve vašem konfiguračním souboru Wrangler.

Cloudflare se ve výchozím nastavení nejprve pokusí porovnat cestu požadavku s cestou ke statickému assetu, která vychází ze struktury souborů nahraného adresáře s assety. Jde buď o adresář určený assets.directory ve vaší konfiguraci Wrangler nebo, v případě Cloudflare Vite plugin, výstupní adresář sestavení klienta. Pokud takový soubor neexistuje, spustíme Worker, pokud je k dispozici. Pokud Worker není k dispozici, nebo pokud Worker následně použije asset binding, Cloudflare přejde na chování nastavené pomocí not_found_handling.

Viz dokumentace ke směrování další informace o tom, jak funguje směrování se statickými aktivy a jak toto chování přizpůsobit.

Použijte bindings s Vue

Váš nový projekt také obsahuje Worker na ./server/index.ts, který můžete použít jako backendové API pro vaši aplikaci Vue. Vaše aplikace Vue nemůže přímo přistupovat k bindingům Workers, ale může s nimi komunikovat prostřednictvím tohoto Workeru. Můžete odesílat fetch() požadavky z vaší aplikace Vue do Workeru, který pak může požadavek zpracovat a použít vazby.

Díky bindings lze vaši aplikaci plně integrovat s Cloudflare Developer Platform a získat tak přístup k výpočetnímu výkonu, úložišti, AI a dalším službám.

Bindings

Přístup k výpočetnímu výkonu, úložišti, AI a dalším službám.