← Cloudflare Pages / pages / framework-guides

Vue

Vue ↗ je progresivní framework JavaScript pro tvorbu uživatelských rozhraní. Základním principem Vue je postupné zavádění: díky tomu lze snadno vytvářet aplikace Vue, které fungují společně s vaším stávajícím kódem.

V tomto průvodci vytvoříte novou aplikaci Vue a nasadíte ji pomocí Cloudflare Pages. Použijete vue-cli, plnohodnotný nástroj pro generování nových aplikací Vue.

Použijte create-cloudflare ↗ CLI (C3) k nastavení nového projektu. C3 vytvoří nový adresář projektu, spustí oficiální nástroj pro nastavení Vue a nabídne možnost okamžitého nasazení.

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

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

Všechny průvodce frameworky předpokládají, že již máte základní znalosti Git ↗. Pokud s Gitem začínáte, podívejte se na tento shrnutá příručka ke Gitu ↗ jak nastavit Git na svém lokálním počítači.

Pokud klonujete přes SSH, musíte vygenerujte SSH klíče ↗ na každém počítači, který používáte pro push nebo pull z GitHubu.

Viz dokumentace GitHub ↗ a Dokumentace Git ↗ s dalšími informacemi.

Vytvořte nový repozitář GitHub na repo.new ↗. Po vytvoření nového repozitáře přejděte do adresáře nově vytvořeného projektu a v terminálu spusťte následující příkazy, kterými připravíte a odešlete svou místní aplikaci na GitHub:

git remote add origin https://github.com/<your-gh-username>/<repository-name>
git branch -M main
git push -u origin main

Pokud používáte create-cloudflare(C3) ↗ k vytvoření nového projektu Vue nainstaluje C3 všechny závislosti, které projekt potřebuje, a vyzve vás k nasazení projektu přes CLI. Pokud jej nasadíte, web se zveřejní a získáte URL adresu nasazení.

Chcete-li nasadit svůj web do Pages:

1. V dashboardu Cloudflare přejděte na Workers & Pages stránce.

   Přejděte na Workers & Pages ↗

2. Vyberte Vytvoření aplikace.

3. Vyberte Pages kartě.

4. Vyberte Importujte existující repozitář Git.

5. Vyberte nově vytvořený repozitář GitHub a poté vyberte Zahájit nastavení.

6. V Nastavení sestavení a nasazení sekci uveďte následující informace:

Po nakonfigurování webu můžete spustit první nasazení. Měli byste vidět, jak Cloudflare Pages instaluje vue, závislosti projektu a sestavuje web, než ho nasadí.

Po nasazení webu získáte pro svůj projekt jedinečnou subdoménu na *.pages.dev. Pokaždé, když do své aplikace Vue committnete nový kód, Cloudflare Pages automaticky znovu sestaví váš projekt a nasadí ho. Získáte také přístup k náhledová nasazení u nových pull requestů, takže si můžete prohlédnout, jak změny na vašem webu vypadají, než je nasadíte do produkce.

Dokončením tohoto návodu jste úspěšně nasadili svůj web Vue na Cloudflare Pages. Chcete-li začít s dalšími frameworky, podívejte se na seznam návodů pro frameworky.