Vue.js

wygląd

Na tej stronie

Narzędzia ​

Wypróbuj w przeglądarce ​

Nie musisz nic instalować na swojej maszynie, aby sprawdzić jak działają SFC w Vue - istnieją interaktywne piaskownice, które pozwalają poeksperymentować bezpośrednio w przeglądarce:

  • Piaskownica Vue SFC
    • Zawsze zdeployowana z ostatniego commita
    • Zaprojektowana celem analizy rezultatów kompilacji komponentów jednoplikowych
  • Starter Vue + Vite na StackBlitz
    • Środowisko z wbudowanym IDE, uruchamiające serwer deweloperski Vite w przeglądarce
    • Zbliżone do środowiska lokalnego

Zalecane jest również korzystanie z tych piaskownic online do tworzenia reprodukcji podczas zgłaszania błędów.

Przygotowywanie Projektu ​

Vite ​

Vite to bardzo lekkie i szybkie narzędzie budowania projektu z pierwszorzędowym wsparciem dla Vue SFC. Zostało stworzone przez Evana You, który również jest autorem Vue!

Aby zacząć pracę z Vite + Vue, wywołaj polecenie:

npm
pnpm
yarn
bun
sh
$ npm create vue@latest

To polecenie zainstaluje i wywoła create-vue, oficjalne narzędzie do setupowania projektów.

  • Aby dowiedzieć się więcej o Vite, odwiedź dokumentację Vite.
  • Aby skonfigurować zachowanie Vue w projekcie Vite, na przykład, aby przekazać jakieś opcje do kompilatora Vue, odwiedź dokumentację dla @vitejs/plugin-vue.

Oba narzędzia przytoczony wyżej również wspierają pobieranie plików jako gotowego projektu Vite.

Vue CLI ​

Vue CLI to oficjalny zestaw narzędzi dla Vue oparty na webpacku. Jest on obecnie w fazie maintenance i zalecamy, aby tworzyć nowe projekty z użyciem Vite o ile nie są Tobie potrzebne funkcjonalności specyficzne dla webpacka. Vite dostarczy o wiele lepsze developer experience w większości przypadków.

Aby dowiedzieć się o migracji z Vue CLI do Vite:

O kompilacji szablonów w środowisku przeglądarki ​

Gdy używasz Vue bez kroku budowania, szablony komponentów definiowane są bezpośrednio w kodzie HTML strony lub jako ciągi znaków w JavaScript. W tego typu przypadkach, Vue musi być również użyte razem z kompilatorem szablonów dla przeglądarki, aby wedle potrzeb kompilować tego typu szablony. Z drugiej strony, kompilator nie jest potrzebny jeśli prekompilujemy szablony na etapie budowania projektu. Aby zmniejszyć rozmiar paczki, Vue dostarcza różne "wersje" zoptymalizowane pod różne przypadki.

  • Pliki wersji zaczynające się na vue.runtime.* są wersjami runtime-only: nie zawierają one kompilatora. W przypadku używania ich wszystkie szablony muszą być pre-kompilowane na etapie budowania projektu.

  • Pliki wersji nie zawierające .runtime są wersjami pełnymi: zawierają kompilator i wspierają kompilowanie szablonów bezpośrednio w przeglądarce. Jednakże, zwiększają rozmiar paczki o ~14kb.

Domyślnie, nasze konfiguracje narzędzi używają wersji runtime-only, z tego powodu że podczas budowania projektu wszystkie szablony w SFC są prekompilowane. Jeśli z jakiegoś powodu potrzebujesz kompilacji szablonów w przeglądarce pomimo kroku budowania, możesz skonfigurować narzędzie budowania projektu by aliasować vue na vue/dist/vue.esm-bundler.js.

Jeśli szukasz lżejszej, alternatywnej wersji Vue dla projektów bez kroku budowania, zobacz petite-vue.

Wsparcie IDE ​

  • Rekomendowane przez IDE to VS Code oraz wtyczka Vue - Official (wcześniej Volar). Ta wtyczka dostarcza kolorwanie składni, wsparcie dla TypeScripta oraz intellisense dla wyrażeń w szablonach i propsach komponentów.

    TIP

    Wtyczka Vue - Official zastępuje Vetur, poprzednią oficjalną wtyczkę do VS Code dla Vue 2. Jeśli masz obecnie zainstalowany Vetur upewnij się, aby go wyłączyć pracując przy projektach w Vue 3.

  • WebStorm również posiada dobre wbudowane wsparcie dla Vue SFC.

  • Inne IDE które wspierają Language Service Protocol (LSP) mogą również wykorzystać główne funkcjonalności Volara:

Narzędzia deweloperskie w przeglądarce ​

Obejrzyj bezpłatną lekcję wideo na Vue School

Narzędzia deweloperskie Vue dla przeglądarek pozwalają przeglądać drzewo komponentów w aplikacji Vue, podejrzeć stan konkretnych komponentów, śledzić zdarzenia zmiany stanu oraz profilować wydajność.

Zrzut ekranu narzędzi deweloperskich

TypeScript ​

Główny artykuł: Używanie Vue z TypeScriptem.

  • Wtyczka Vue - Official dostarcza sprawdzanie typów w obrębie SFC przy użyciu bloków <script lang="ts">. Tyczy się to również wyrażeń w szablonach i walidacji props między komponentami.

  • Użyj vue-tsc aby przeprowadzić sprawdzenie typów z poziomu linii poleceń, albo by wygenerować pliki d.ts dla komponentów jednoplikowych.

Testowanie ​

Główny artykuł: Poradnik Testowania.

  • Cypress jest zalecanym narzędziem do testów E2E. Może być również użyty do testowania komponentów dla SFC poprzez Cypress Component Test Runner.

  • Vitest jest test runnerem stworzonym przez zespół Vue / Vite, który skupia się na szybkości. Jest zaprojektowany dla aplikacji opierających się na Vite, aby dostarczyć taki sam błyskawiczny feedback zarówno podczas testów jednostkowych czy testów komponentów.

  • Jest może również działać z Vite dzięki vite-jest. Jednakże, jest on jedynie zalecany jedynie gdy masz już istniejące zestawy testów opierające się na Jest, które chcesz zmigrować do setupu opierającego się o Vite. W innym wypadku Vite dostarcza bardzo podobne funkcjonalności i jest znacznie łatwiejszy w integracji.

Linting ​

Zespół Vue utrzymuje eslint-plugin-vue, wtyczkę do ESLint która wspiera zestaw zasad lintera dla SFC.

Użytkownicy korzystający uprzednio z Vue CLI mogą być przyzwyczajeni do konfigurowania linterów poprzez loadery webpacka. Jednakże, przy projekcie opierającym się o Vite, naszymi zalecaniami są:

  1. npm install -D eslint eslint-plugin-vue, i dalej podążanie poradnikiem konfiguracji eslint-plugin-vue.

  2. Konfiguracja ESLint w Twoim IDE, na przykład ESLint dla VS Code, dzięki czemu feedback od lintera dostaniesz bezpośrednio w swoim edytorze podczas developmentu. Dodatkowo pomaga to ominąć dodatkowe koszta lintera występujące przy włączania dev serwera.

  3. Uruchamianie ESLint jako część procesure budującego kod produkcyjny, tak aby otrzymać pełny feedback od lintera przed wypuszczaniem kodu na produkcję.

  4. (Opcjonalnie) Konfiguracja narzędzi takich jak lint-staged, aby automatycznie lintować zmodyfikowane pliki przy uruchamianiu poleceń gita.

Formatowanie ​

  • Wtyczka Vue - Official do VS Code dostarczana narzędzia formatowania kodu komponentów SFC.

  • Alternatywnie, Prettier również dostarcza wsparcie formatowania dla komponentów jednoplikowych.

Integracja niestandardowych bloków SFC ​

Niestandardowe bloki są kompilowane na importy do tego samego pliku Vue podczas różnych zapytań. To od narzędzia budującego kod zależy to jak zostaną obsłużone te importy.

  • Jeśli używasz Vite, najlepiej stworzyć własny plugin Vite, aby obsłużyć niestandardowe bloki i zmienić je w wykonywalny kod JavaScript. Przykład

  • Jeśli używasz Vue CLI, lub po prostu webpacka, własny loader może być skonfigurowany celem obsługi niestandardowych bloków. Przykład

Paczki niskiego poziomu ​

@vue/compiler-sfc ​

Ta paczka jest częścią głównego monorepo Vue i jest zawsze opublikowana z tą samą wersją co główna paczka vue. Jest załączona jako zależność głównej paczki vue i dostępna pod vue/compiler-sfc, więc nie musisz instalować jej osobno.

Paczka dostarcza różnego rodzaju narzędzia niskiego poziomu do procesowania komponentów SFC i jest przeznaczona dla autorów niestandardowych narzędzi, które wspierają komponenty jednoplikowe.

TIP

Zawsze używaj tą paczkę poprzez import vue/compiler-sfc ponieważ zapewnia to używanie jej wersji zsynchronizowanej z runtime Vue.

@vitejs/plugin-vue ​

Oficjalna wtyczka, która dostarcza wsparcie SFC w Vite.

vue-loader ​

Oficjalny loader zapewniający wsparcie SFC dla webpacka. Jeśli używasz Vue CLI, również zajrzyj do dokumentacji odnośnie modyfikowania vue-loader w Vue CLI.

Inne piaskownice dostępne w sieci ​

Edytuj tę stronę na GitHub