Szybki start: tworzenie projektu Vue.js

W tym przewodniku Szybki start utworzysz i uruchomisz podstawową front-endową aplikację internetową Vue.js. Ten artykuł zawiera 5–10-minutowe wprowadzenie do zintegrowanego środowiska projektowego (IDE) Visual Studio.

Warunki wstępne

Przygotuj konfigurację przy użyciu następujących wymagań wstępnych:

Tworzenie aplikacji Vue

Utwórz aplikację internetową Vue.js, wykonując następujące kroki:

  1. W oknie uruchamiania Visual Studio (wybierz pozycjęOkno uruchamiania>) wybierz pozycję Utwórz nowy projekt.

    Zrzut ekranu przedstawiający sposób wybierania opcji

    Zrzut ekranu przedstawiający sposób wybierania opcji

  2. W oknie dialogowym Tworzenie nowego projektu wprowadź Vue w polu wyszukiwania. Wybierz szablon aplikacji Vue dla języka JavaScript lub TypeScript, a następnie wybierz pozycję Dalej.

    Zrzut ekranu przedstawiający sposób wybierania szablonu Vue dla języka JavaScript lub TypeScript.

    Zrzut ekranu przedstawiający sposób wybierania szablonu Vue dla języka JavaScript lub TypeScript.

    W Visual Studio 2022 w wersji 11 lub nowszej nazwa szablonu Standalone JavaScript Vue Project została zmieniona na Vue App.

  3. Wprowadź nazwę projektu i rozwiązania, a następnie wybierz pozycję Utwórz.

Poczekaj, aż Visual Studio utworzy nowy projekt.

Wyświetlanie właściwości projektu

Domyślne ustawienia projektu umożliwiają kompilowanie i debugowanie projektu.

Jeśli chcesz zmienić jakiekolwiek ustawienia, wykonaj następujące kroki:

  1. Kliknij prawym przyciskiem myszy projekt w Eksplorator rozwiązań i wybierz polecenie Właściwości.

  2. W okienku właściwości projektu wybierz pozycję Debuguj, Linting, Kompilacja lub Wdróż , aby wyświetlić odpowiednie właściwości.

W przypadku konfiguracji debugera użyj pliku launch.json .

Notatka

launch.json Plik konfiguracji debugera przechowuje ustawienia uruchamiania skojarzone z akcją Rozpocznij na pasku narzędzi Debugowanie. Plik launch.json musi znajdować się w folderze .vscode w projekcie.

Buduj swój projekt

Aby skompilować nowy projekt, wybierz pozycję Kompiluj>.

Uruchamianie projektu

Wybierz klawisz F5 lub użyj akcji Rozpocznij w górnej części okna.

Projekt otwiera wiersz polecenia z następującym tekstem (lub podobnym):

VITE v4.4.9 ready in 780 ms

Notatka

Sprawdź dane wyjściowe konsoli pod kątem komunikatów, takich jak instrukcje dotyczące aktualizowania wersji Node.js.

Po pomyślnym zakończeniu procesu zostanie otwarta podstawowa aplikacja Vue.js.

Następny krok