Nuta
Dostęp do tej strony wymaga autoryzacji. Możesz 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 (IDE) programu Visual Studio 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ędziaPobierz narzędzia >i funkcje..., co spowoduje otwarcie Instalatora programu Visual Studio. Wybierz obciążenie programistyczneNode.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 internetowejNode.js , aby uzyskać najlepszą zgodność ze strukturami zewnętrznymi i bibliotekami. Node.js jest tworzona dla 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 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 internetowejNode.js .
Aby uzyskać więcej informacji, zobacz wymagania wstępne.
Otwórz program Visual Studio.
Utwórz nowy projekt.
Naciśnij Esc, aby zamknąć okno uruchamiania. Wpisz ctrl + Q , aby otworzyć pole wyszukiwania, wpisz Basic Vue.js, a następnie wybierz pozycję Podstawowa Vue.js aplikacja internetowa (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 Podstawowa aplikacja internetowa Vue.js, musisz dodać obciążenie robocze związane z Node.js. Aby uzyskać szczegółowe instrukcje, zobacz Wymagania wstępne.
Program Visual Studio tworzy nowy projekt. Nowy projekt zostanie otwarty w Eksploratorze 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 Eksploratorze 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
Zapoznaj się z Eksploratorem rozwiązań w okienku po prawej stronie.
Wyróżniony pogrubioną czcionką jest twój projekt, za pomocą nazwy, którą podałeś w oknie dialogowym Nowy projekt. Na dysku, ten projekt jest reprezentowany przez plik njsproj w folderze projektu.
Na najwyższym poziomie jest rozwiązanie, 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ć Node.js polecenia z wiersza polecenia, kliknij prawym przyciskiem myszy węzeł projektu i wybierz polecenie Otwórz wiersz polecenia tutaj.
Dodaj plik .vue do projektu
W Eksploratorze 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 JavaScript Vue Single File Component lub TypeScript Vue Single File Component, następnie kliknij Dodaj.
Program Visual Studio dodaje nowy plik do projektu.
Budowanie 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 Vue.js języka JavaScript (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 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 przewodnika "Szybki start"! Mamy nadzieję, że wiesz już trochę, jak używać środowiska IDE programu Visual Studio z Vue.js. Jeśli chcesz zagłębić się w jego możliwości, przejdź do samouczka w sekcji Samouczki spisu treści.