Uwaga
Dostęp do tej strony wymaga autoryzacji. Może spróbować zalogować się lub zmienić katalogi.
Dostęp do tej strony wymaga autoryzacji. Możesz spróbować zmienić katalogi.
W tym 5-10-minutowym wprowadzeniu do zintegrowanego środowiska projektowego programu Visual Studio (IDE) utworzysz i uruchomisz prostą aplikację internetową Vue.js.
Wymagania wstępne
Musisz mieć zainstalowany program Visual Studio i obciążenie programistyczne Node.js.
Jeśli jeszcze nie zainstalowano programu Visual Studio 2019, przejdź do strony pobierania programu Visual Studio, aby zainstalować ją bezpłatnie.
Jeśli musisz zainstalować obciążenie, ale masz już program Visual Studio, przejdź do pozycji Narzędzia Pobierz narzędzia>i funkcje..., co spowoduje otwarcie Instalator programu Visual Studio. Wybierz pakiet roboczy Programowanie Node.js, a następnie wybierz pozycję Modyfikuj.
Musisz mieć zainstalowane środowisko uruchomieniowe Node.js.
Jeśli nie masz zainstalowanej wersji, zalecamy zainstalowanie wersji LTS z witryny internetowej Node.js , aby uzyskać najlepszą zgodność z zewnętrznymi strukturami i bibliotekami. Środowisko Node.js jest tworzone na potrzeby architektur 32-bitowych i 64-bitowych. Narzędzia Node.js w programie Visual Studio uwzględnione w obciążeniu Node.js obsługują obie wersje. Tylko jeden jest wymagany, a instalator Node.js obsługuje tylko jedną instalację jednocześnie.
Ogólnie rzecz biorąc, program Visual Studio automatycznie wykrywa zainstalowane środowisko uruchomieniowe Node.js. Jeśli nie wykryje zainstalowanego środowiska uruchomieniowego, możesz skonfigurować projekt, aby odwoływać się do zainstalowanego środowiska uruchomieniowego na stronie właściwości (po utworzeniu projektu kliknij prawym przyciskiem myszy węzeł projektu, wybierz polecenie Właściwości i ustaw ścieżkę Node.exe). Możesz użyć globalnej instalacji środowiska Node.js lub określić ścieżkę do interpretera lokalnego w każdym z projektów Node.js.
Tworzenie projektu
Najpierw utworzysz projekt aplikacji internetowej Vue.js.
Jeśli nie masz jeszcze zainstalowanego środowiska uruchomieniowego Node.js, zainstaluj wersję LTS z witryny internetowej Node.js .
Aby uzyskać więcej informacji, zobacz wymagania wstępne.
Otwórz program Visual Studio.
Tworzenie nowego projektu.
Naciśnij klawisz Esc , aby zamknąć okno uruchamiania. Wpisz Ctrl + Q , aby otworzyć pole wyszukiwania, wpisz Basic Vue.js, a następnie wybierz pozycję Podstawowa aplikacja internetowa Vue.js (JavaScript lub TypeScript). W wyświetlonym oknie dialogowym wpisz nazwę basic-vuejs, a następnie wybierz pozycję Utwórz.
Jeśli nie widzisz szablonu projektu podstawowej aplikacji internetowej Vue.js, musisz dodać pakiet roboczy programowanie Node.js. Aby uzyskać szczegółowe instrukcje, zobacz Wymagania wstępne.
Program Visual Studio tworzy nowy projekt. Nowy projekt zostanie otwarty w Eksplorator rozwiązań (okienko po prawej stronie).
Sprawdź okno Dane wyjściowe (dolne okienko), aby uzyskać postęp instalacji pakietów npm wymaganych dla aplikacji.
W Eksplorator rozwiązań otwórz węzeł npm i upewnij się, że są zainstalowane wszystkie wymienione pakiety npm.
Jeśli brakuje jakichkolwiek pakietów (ikona wykrzyknika), możesz kliknąć prawym przyciskiem myszy węzeł npm i wybrać polecenie Zainstaluj brakujące pakiety npm.
Eksplorowanie środowiska IDE
Przyjrzyj się Eksplorator rozwiązań w okienku po prawej stronie.
Wyróżniona pogrubioną czcionką jest projekt, używając nazwy nadanej w oknie dialogowym Nowy projekt . Na dysku ten projekt jest reprezentowany przez element .Plik njsproj w folderze projektu.
Na najwyższym poziomie jest rozwiązaniem, które domyślnie ma taką samą nazwę jak projekt. Rozwiązanie reprezentowane przez element .Plik sln na dysku jest kontenerem dla co najmniej jednego powiązanego projektu.
W węźle npm są wyświetlane wszystkie zainstalowane pakiety npm. Możesz kliknąć prawym przyciskiem myszy węzeł npm, aby wyszukać i zainstalować pakiety npm przy użyciu okna dialogowego.
Jeśli chcesz zainstalować pakiety npm lub uruchomić polecenia Node.js z wiersza polecenia, kliknij prawym przyciskiem myszy węzeł projektu i wybierz polecenie Otwórz wiersz polecenia tutaj.
Dodawanie pliku vue do projektu
W Eksplorator rozwiązań kliknij prawym przyciskiem myszy dowolny folder, taki jak folder src/components, a następnie wybierz polecenie Dodaj>nowy element.
Jeśli nie widzisz wszystkich szablonów elementów, wybierz pozycję Pokaż wszystkie szablony, a następnie wybierz szablon elementu.
Wybierz pozycję JavaScript Vue Single File Component lub TypeScript Vue Single File Component, a następnie kliknij przycisk Dodaj.
Program Visual Studio dodaje nowy plik do projektu.
Kompilowanie projektu
Następnie wybierz pozycję Kompiluj>rozwiązanie kompilacji, aby skompilować projekt.
Sprawdź okno Dane wyjściowe, aby wyświetlić wyniki kompilacji, a następnie wybierz pozycję Kompilacja z listy Pokaż dane wyjściowe.
Szablon projektu JavaScript Vue.js (i starsze wersje szablonu języka TypeScript) używa skryptu build npm, konfigurując zdarzenie po kompilacji. Jeśli chcesz zmodyfikować to ustawienie, otwórz plik projektu (<projectname.njsproj>) w Eksploratorze Windows i znajdź ten wiersz kodu:
<PostBuildEvent>npm run build</PostBuildEvent>
Uruchamianie aplikacji
Naciśnij klawisze Ctrl+F5 (lub Uruchom > bez debugowania), aby uruchomić aplikację.
W konsoli programu zostanie wyświetlony komunikat Uruchamianie serwera programistycznego.
Następnie aplikacja zostanie otwarta w przeglądarce.
Jeśli nie widzisz uruchomionej aplikacji, odśwież stronę.
Zamknij przeglądarkę internetową.
Gratulujemy ukończenia tego przewodnika Szybki start! Mamy nadzieję, że poznasz nieco sposób korzystania ze środowiska IDE programu Visual Studio z biblioteką Vue.js. Jeśli chcesz zagłębić się w jego możliwości, przejdź do samouczka w sekcji Samouczki spisu treści.