Vue.js

Appearance

Obsah stránky

Nástroje ​

Vyzkoušejte si to online ​

Abyste si mohli vyzkoušet Vue SFC, nemusíte na svém počítači nic instalovat - existují online „hřiště“, která vám to umožní přímo ve webovém prohlížeči:

  • Vue SFC Playground
    • Vždy nasazeno z nejnovějšího commitu
    • Navrženo pro prohlížení výsledků kompilace komponent
  • Vue + Vite na StackBlitz
    • Prostředí podobné IDE, které spouští skutečný Vite dev server ve webovém prohlížeči
    • Nejbližší k lokálnímu nastavení

Tato online hřiště je rovněž doporučeno používat pro tvorbu reprodukcí při hlášení chyb.

Založení projektu (scaffolding) ​

Vite ​

Vite je odlehčený a rychlý build nástroj s prvotřídní podporou pro Vue SFC. Je vytvořen Evanem You, který je také autorem Vue!

Pro zahájení práce s Vite + Vue jednoduše spusťte:

npm
pnpm
yarn
bun
sh
$ npm create vue@latest

Tento příkaz nainstaluje a spustí create-vue, oficiální nástroj pro sestavení Vue projektů.

  • Chcete-li se o Vite dozvědět víc, podívejte se do Vite dokumentace.
  • Chcete-li ve Vite projektu nakonfigurovat chování specifické pro Vue, například předávání možností (options) překladači Vue, podívejte se do dokumentace pro @vitejs/plugin-vue.

Obě výše zmíněná online hřiště také podporují stahování souborů ve formě Vite projektu.

Vue CLI ​

Vue CLI je oficiální sada nástrojů pro Vue založená na technologii webpack. Nyní už je pouze v režimu údržby a doporučujeme začínat nové projekty s Vite, pokud se nespoléháte na funkce specifické pouze pro webpack. Ve většině případů poskytne Vite vývojářům lepší DX.

Pro informace o migraci z Vue CLI na Vite:

Poznámka ke kompilaci šablon v prohlížeči ​

Při použití Vue bez build fáze jsou šablony komponent psány buďto přímo v HTML stránky nebo jako vložené JavaScriptové řetězce. V takových případech musí Vue dodat kompilátor šablon do prohlížeče, aby bylo možné provádět kompilaci šablon na požádání (on-the-fly). Na druhou stranu, překladač není potřebný, pokud šablony během build fáze předkompilujeme. Pro snížení velikosti klientského JS balíčku Vue poskytuje různé „buildy“ optimalizované pro různé použití.

  • Soubory buildu, které začínají vue.runtime.*, jsou buildy pouze pro runtime: neobsahují překladač. Při použití těchto buildů musí být všechny šablony předkompilovány pomocí build fáze.

  • Soubory buildu, které neobsahují .runtime, jsou úplné buildy: obsahují překladač a podporují kompilaci šablon přímo v prohlížeči. Nicméně zvětší velikost přeneseného balíčku o ~14kb.

Naše výchozí nástroje používají build pouze pro runtime, protože všechny SFC šablony jsou předkompilovány. Pokud z nějakého důvodu potřebujete kompilaci šablon v prohlížeči i s build fází, můžete tak učinit konfigurací build nástroje, který přiřadí vue na vue/dist/vue.esm-bundler.js.

Pokud hledáte odlehčenou alternativu použitelnou bez build fáze, lze využít petite-vue.

Podpora v IDE ​

  • Doporučené nastavení IDE je VS Code + rozšíření Vue - Official (dříve Volar). Rozšíření poskytuje zvýrazňování syntaxe, podporu TypeScriptu a inteligentní nápovědu pro výrazy šablon a vlastnosti (props) komponent.

    TIP

    Vue - Official nahrazuje Vetur, naše předchozí oficiální rozšíření VS Code pro Vue 2. Pokud máte momentálně nainstalovaný Vetur, ujistěte se, že ho ve Vue 3 projektech vypnete.

  • WebStorm též poskytuje skvělou vestavěnou podporu pro Vue SFC.

  • Další IDE, která podporují Language Service Protocol (LSP), mohou s jeho pomocí základní Volar funkce také využívat:

Devtools pro prohlížeč ​

Rozšíření prohlížeče Vue devtools vám umožňuje prozkoumat strom komponent Vue aplikace, prohlédnout si stav jednotlivých komponent, sledovat události správy stavu a profilovat výkon.

Screenshot z devtools

TypeScript ​

Hlavní článek: Používání Vue s TypeScriptem.

  • Rozšíření Vue - Official poskytuje typovou pro SFC pomocí bloků <script lang="ts">, včetně výrazů šablony a ověřování vlastností (props) mezi komponentami.

  • Použijte vue-tsc pro provádění stejné typové kontroly z příkazového řádku nebo pro generování souborů d.ts pro SFC.

Testování ​

Hlavní článek: Průvodce testováním.

  • Cypress je doporučen pro E2E testy. Lze jej také použít pro component testing Vue SFC pomocí Cypress Component Test Runner.

  • Vitest je testovací nástroj vytvořený členy týmu Vue / Vite, který se zaměřuje na rychlost. Je speciálně navržen pro aplikace založené na Vite, aby poskytoval stejnou okamžitou zpětnou vazbu pro unit / component testing.

  • Jest lze použít s Vite pomocí vite-jest. Nicméně, toto se doporučuje pouze v případě, že máte existující sady testů založené na Jest, které potřebujete migrovat do projektu založeného na Vite, protože Vitest poskytuje podobné funkcionality s mnohem efektivnější integrací.

Linting ​

Vue tým udržuje eslint-plugin-vue, plugin pro ESLint, který podporuje lintovací pravidla specifická pro SFC.

Uživatelé, kteří dříve používali Vue CLI, mohou být zvyklí na konfiguraci linterů pomocí webpack loaderů. Nicméně při použití nastavení založeného na Vite je naše obecné doporučení:

  1. npm install -D eslint eslint-plugin-vue, poté postupujte podle průvodce konfigurací eslint-plugin-vue.

  2. Nastavte rozšíření IDE pro ESLint, například ESLint pro VS Code, abyste měli během vývoje zpětnou vazbu linteru přímo ve vašem editoru. Tím se také zabrání zbytečným nákladům na lintování při spuštění vývojového (dev) serveru.

  3. Spusťte ESLint jako součást příkazu pro produkční build, abyste získali úplnou zpětnou vazbu linteru před odesláním do produkce.

  4. (Volitelné) Nastavte nástroje jako lint-staged, abyste automaticky lintovali upravené soubory při commitu do gitu.

Formátování ​

Nástroje pro integraci vlastních SFC bloků ​

Vlastní bloky jsou zkompilovány do importů do stejného Vue souboru s různými request queries. Je na v projektu použitém build nástroji, jak se s těmito importy zachází.

  • Pokud používáte Vite, měl by být k přeměně odpovídajících vlastních bloků na spustitelný JavaScript použit custom Vite plugin. Příklad

  • Pokud používáte Vue CLI nebo čistý webpack, měl by být k přeměně odpovídajících bloků nakonfigurován webpack loader. Příklad

Balíčky nižší úrovně ​

@vue/compiler-sfc ​

Tento balíček je součástí Vue jádra a je vždy publikován se stejnou verzí jako hlavní balíček vue. Je zahrnut jako závislost hlavního balíčku vue a je nastaven jako proxy pod vue/compiler-sfc, takže jej nemusíte samostatně instalovat.

Samotný balíček poskytuje nástroje nižší úrovně pro zpracování Vue SFC a je určen pouze pro autory nástrojů, kteří potřebují podporovat Vue SFC ve vlastních knihovnách.

TIP

Vždy upřednostňujte použití tohoto balíčku pomocí deep importu vue/compiler-sfc, protože to zajišťuje, že jeho verze je synchronizována s běhovým prostředím Vue.

@vitejs/plugin-vue ​

Oficiální plugin, který poskytuje podporu Vue SFC pro Vite.

vue-loader ​

Oficiální loader, který poskytuje podporu Vue SFC pro webpack. Pokud používáte Vue CLI, podívejte se také na dokumentaci k úpravě nastavení vue-loader ve Vue CLI.

Ostatní online hřiště {#other-online-playgrounds}s ​

Navrhněte úpravu této stránky na GitHubu