Samouczek: tworzenie aplikacji ASP.NET Core za pomocą programu Vue w programie Visual Studio

Z tego artykułu dowiesz się, jak utworzyć projekt ASP.NET Core, który będzie działać jako zaplecze interfejsu API i projekt Vue, który będzie działać jako interfejs użytkownika.

Program Visual Studio zawiera szablony aplikacji jednostronicowej (SPA) ASP.NET Core, które obsługują platformę Angular, React i Vue. Szablony udostępniają wbudowany folder Aplikacja kliencka w projektach ASP.NET Core, który zawiera podstawowe pliki i foldery każdej struktury.

Możesz użyć metody opisanej w tym artykule, aby utworzyć aplikacje jednostronicowe ASP.NET Core, które:

• Umieść aplikację kliencką w osobnym projekcie spoza projektu ASP.NET Core
• Tworzenie projektu klienta na podstawie interfejsu wiersza polecenia platformy zainstalowanego na komputerze

Uwaga

W tym artykule opisano proces tworzenia projektu przy użyciu zaktualizowanego szablonu w programie Visual Studio 2022 w wersji 17.8, który używa interfejsu wiersza polecenia vite.

Wymagania wstępne

Upewnij się, że zainstalowano następujące elementy:

• Program Visual Studio 2022 w wersji 17.8 lub nowszej z zainstalowanym obciążeniem ASP.NET i tworzenie aplikacji internetowych. Przejdź do strony pobierania programu Visual Studio, aby zainstalować ją bezpłatnie. Jeśli musisz zainstalować obciążenie i masz już program Visual Studio, przejdź do pozycji Narzędzia Pobierz narzędzia>i funkcje..., co spowoduje otwarcie Instalator programu Visual Studio. Wybierz obciążenie ASP.NET i tworzenie aplikacji internetowych, a następnie wybierz pozycję Modyfikuj.
• npm (https://www.npmjs.com/), który jest dołączony do Node.js.

Tworzenie aplikacji frontonu

1. W oknie Start (wybierz pozycję Okno uruchamiania pliku>, aby otworzyć), wybierz pozycję Utwórz nowy projekt.

   

2. Wyszukaj pozycję Vue na pasku wyszukiwania u góry, a następnie wybierz pozycję Vue i ASP.NET Core (wersja zapoznawcza) przy użyciu języka JavaScript lub TypeScript jako wybranego języka.

   

3. Nadaj projektowi nazwę VueWithASP , a następnie wybierz pozycję Utwórz.

   Eksplorator rozwiązań przedstawiono następujące informacje o projekcie:

   

   W porównaniu z autonomicznym szablonem Vue zobaczysz kilka nowych i zmodyfikowanych plików na potrzeby integracji z platformą ASP.NET Core:

   • vite.config.json (zmodyfikowane)
   • HelloWorld.vue (zmodyfikowane)
   • package.json (zmodyfikowane)

Ustawianie właściwości projektu

1. W Eksplorator rozwiązań kliknij prawym przyciskiem myszy plik VueWithASP.Server i wybierz polecenie Właściwości.

   

2. Na stronie Właściwości otwórz kartę Debugowanie i wybierz opcję Otwórz profile uruchamiania debugowania. Usuń zaznaczenie opcji Uruchom przeglądarkę dla profilu o nazwie po projekcie ASP.NET Core (lub https, jeśli istnieje).

   

   Ta wartość uniemożliwia otwarcie strony internetowej przy użyciu danych o pogodzie źródłowej.

   Uwaga

   W programie Visual Studio launch.json przechowuje ustawienia uruchamiania skojarzone z przyciskiem Uruchom na pasku narzędzi Debugowanie. Obecnie launch.json musi znajdować się w folderze .vscode.

Uruchamianie projektu

Naciśnij klawisz F5 lub wybierz przycisk Start w górnej części okna, aby uruchomić aplikację. Pojawią się dwa wiersze polecenia:

• Uruchomiony projekt interfejsu API platformy ASP.NET Core
• Interfejs wiersza polecenia vite przedstawiający komunikat, taki jak VITE v4.4.9 ready in 780 ms

Uwaga

Sprawdź dane wyjściowe konsoli pod kątem komunikatów. Na przykład może pojawić się komunikat o aktualizacji Node.js.

Zostanie wyświetlona aplikacja Vue i zostanie wypełniona za pośrednictwem interfejsu API. Jeśli nie widzisz aplikacji, zobacz Rozwiązywanie problemów.

Publikowanie projektu

Począwszy od programu Visual Studio 2022 w wersji 17.3, możesz opublikować zintegrowane rozwiązanie przy użyciu narzędzia Publikuj w programie Visual Studio.

Uwaga

Aby użyć funkcji publikowania, utwórz projekt JavaScript przy użyciu programu Visual Studio 2022 w wersji 17.3 lub nowszej.

1. W Eksplorator rozwiązań kliknij prawym przyciskiem myszy projekt VueWithASP.Server i wybierz polecenie Dodaj>odwołanie do projektu.

   Upewnij się, że wybrano projekt vuewithasp.client .

2. Wybierz pozycję OK.

3. Ponownie kliknij prawym przyciskiem myszy projekt ASP.NET Core i wybierz polecenie Edytuj plik projektu.

   Spowoduje to otwarcie pliku csproj dla projektu.

4. W pliku csproj upewnij się, że odwołanie do projektu zawiera <ReferenceOutputAssembly> element z wartością ustawioną na false.

   To odwołanie powinno wyglądać podobnie do poniższego.

    <ProjectReference Include="..\vuewithasp.client\vuewithasp.client.esproj">
      <ReferenceOutputAssembly>false</ReferenceOutputAssembly>
    </ProjectReference>
   

5. Kliknij prawym przyciskiem myszy projekt ASP.NET Core i wybierz polecenie Załaduj ponownie projekt , jeśli ta opcja jest dostępna.

6. W Program.cs upewnij się, że jest obecny następujący kod.

   app.UseDefaultFiles();
   app.UseStaticFiles();
   
   // Configure the HTTP request pipeline.
   if (app.Environment.IsDevelopment())
   {
      app.UseSwagger();
      app.UseSwaggerUI();
   }
   

7. Aby opublikować, kliknij prawym przyciskiem myszy projekt ASP.NET Core, wybierz pozycję Publikuj i wybierz opcje, aby dopasować go do żądanego scenariusza publikowania, takiego jak platforma Azure, publikowanie w folderze itp.

   Proces publikowania zajmuje więcej czasu niż tylko w przypadku projektu ASP.NET Core, ponieważ npm run build polecenie jest wywoływane podczas publikowania. Polecenie BuildCommand jest domyślnie uruchamiane npm run build .

Rozwiązywanie problemów

Błąd serwera proxy

Może zostać wyświetlony następujący błąd:

[HPM] Error occurred while trying to proxy request /weatherforecast from localhost:4200 to https://localhost:5173 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)

Jeśli widzisz ten problem, najprawdopodobniej fronton został uruchomiony przed zapleczem. Po wyświetleniu wiersza polecenia zaplecza i uruchomieniu po prostu odśwież aplikację Vue w przeglądarce.

W przeciwnym razie, jeśli port jest używany, spróbuj zwiększać numer portu o 1 podczas uruchamiania Ustawienia.json i vite.config.js.

Błąd prywatności

Może zostać wyświetlony następujący błąd certyfikatu:

Your connection isn't private

Spróbuj usunąć certyfikaty Vue z folderu %appdata%\local\asp.net\https lub %appdata%\roaming\asp.net\https, a następnie ponów próbę.

Weryfikowanie portów

Jeśli dane pogodowe nie są ładowane poprawnie, może być również konieczne sprawdzenie, czy porty są poprawne.

1. Upewnij się, że numery portów są zgodne. Przejdź do pliku launch Ustawienia.json w projekcie ASP.NET Core (w folderze Właściwości). Pobierz numer portu z applicationUrl właściwości .

   Jeśli istnieje wiele applicationUrl właściwości, poszukaj jednej z nich przy użyciu punktu końcowego https . Powinien wyglądać podobnie do https://localhost:7142.

2. Następnie przejdź do pliku vite.config.js dla projektu Vue. Zaktualizuj właściwość tak, aby odpowiadała target właściwości podczas uruchamiania applicationUrl Ustawienia.json. Po zaktualizowaniu tej wartości powinna wyglądać podobnie do następującej:

   target: 'https://localhost:7142/',
   

Nieaktualna wersja programu Vue

Jeśli podczas tworzenia projektu zostanie wyświetlony komunikat konsoli Nie można odnaleźć pliku "C:\Users\Me\source\repos\vueprojectname\package.json" podczas tworzenia projektu, może być konieczne zaktualizowanie wersji interfejsu wiersza polecenia vite. Po zaktualizowaniu interfejsu wiersza polecenia vite może być również konieczne usunięcie pliku vuerc w katalogu C:\Users\[nazwa_pliku_profilu].

Docker

Jeśli włączysz obsługę platformy Docker podczas tworzenia projektu internetowego interfejsu API, zaplecze może rozpocząć korzystanie z profilu platformy Docker i nie nasłuchuje skonfigurowanego portu 5173. Aby rozwiązać:

Edytuj profil platformy Docker podczas uruchamiania Ustawienia.json dodając następujące właściwości:

"httpPort": 5175, 
"sslPort": 5173  

Alternatywnie zresetuj przy użyciu następującej metody:

1. We właściwościach rozwiązania ustaw aplikację zaplecza jako projekt startowy.
2. W menu Debugowanie przełącz profil przy użyciu menu rozwijanego Przycisk Start do profilu aplikacji zaplecza.
3. Następnie we właściwościach rozwiązania zresetuj wiele projektów startowych.

Następne kroki

Aby uzyskać więcej informacji na temat aplikacji SPA w ASP.NET Core, zobacz Tworzenie aplikacji jednostronicowych. Połączony artykuł zawiera dodatkowy kontekst dla plików projektów, takich jak aspnetcore-https.js, chociaż szczegóły implementacji różnią się ze względu na różnice między szablonami projektu a strukturą Vue.js a innymi strukturami. Na przykład zamiast folderu ClientApp pliki Vue znajdują się w osobnym projekcie.

Aby uzyskać informacje dotyczące programu MSBuild specyficzne dla projektu klienta, zobacz Właściwości programu MSBuild dla programu JSPS.