Tworzenie aplikacji Vue.js przy użyciu narzędzi Node.js Tools for Visual Studio

Program Visual Studio obsługuje tworzenie aplikacji za pomocą platformy Vue.js w języku JavaScript lub TypeScript.

Następujące nowe funkcje obsługują tworzenie aplikacji Vue.js w programie Visual Studio:

• Obsługa bloków Skrypt, Styl i Szablon w plikach .vue
• Rozpoznawanie atrybutu lang w plikach .vue
• Vue.js szablony projektów i plików

Warunki wstępne

• Musisz mieć zainstalowany program Visual Studio 2017 w wersji 15.8 lub nowszej oraz pakiet rozwoju Node.js.

  Ważny

  Ten artykuł wymaga funkcji, które są dostępne tylko w programie Visual Studio 2017 w wersji 15.8.

  Jeśli wymagana wersja nie jest jeszcze zainstalowana, zainstaluj program Visual Studio 2019.

  Jeśli musisz zainstalować obciążenie, ale masz już program Visual Studio, przejdź do Tools>Pobierz narzędzia i funkcje..., co spowoduje otwarcie Instalatora programu Visual Studio. Wybierz obciążenie programowaniaNode.js, a następnie wybierz pozycję Modyfikuj.

• Aby utworzyć projekt platformy ASP.NET Core, musisz mieć zainstalowane obciążenia tworzenia aplikacji ASP.NET i tworzenia aplikacji internetowych oraz aplikacji dla wielu platform .NET Core.

• Musisz mieć zainstalowane środowisko uruchomieniowe Node.js.

  Jeśli nie masz zainstalowanej wersji, zainstaluj wersję LTS z witryny internetowej Node.js. 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 tak, aby odwołył się do zainstalowanego środowiska uruchomieniowego na stronie właściwości. (Po utworzeniu projektu kliknij prawym przyciskiem myszy węzeł projektu i wybierz pozycję Właściwości).

Tworzenie projektu Vue.js przy użyciu Node.js

Do utworzenia nowego projektu można użyć nowych szablonów Vue.js. Użycie szablonu jest najprostszym sposobem rozpoczęcia pracy. Aby uzyskać szczegółowe instrukcje, zobacz Tworzenie pierwszej aplikacji Vue.jsprzy użyciu programu Visual Studio.

Tworzenie projektu Vue.js przy użyciu platformy ASP.NET Core i interfejsu wiersza polecenia programu Vue

Vue.js udostępnia oficjalne CLI (interfejs wiersza polecenia) do szybkiego tworzenia projektów szkieletowych. Jeśli chcesz użyć interfejsu wiersza polecenia do utworzenia aplikacji, wykonaj kroki opisane w tym artykule, aby skonfigurować środowisko deweloperskie.

Ważny

W tych krokach założono, że masz już pewne doświadczenie z platformą Vue.js. Jeśli nie, odwiedź Vue.js, aby dowiedzieć się więcej o strukturze.

Tworzenie nowego projektu ASP.NET Core

W tym przykładzie użyjesz pustej aplikacji ASP.NET Core (C#). Można jednak wybrać spośród różnych projektów i języków programowania.

Tworzenie pustego projektu

• Otwórz program Visual Studio i utwórz nowy projekt.

  W programie Visual Studio 2019 wybierz pozycję Utwórz nowy projekt w oknie uruchamiania. Jeśli okno startowe nie jest otwarte, wybierz pozycję Plik>Okno startowe. Wpisz aplikację internetową, wybierz C# jako język, a następnie wybierz ASP.NET Core Empty, a następnie wybierz Next. Na następnym ekranie nadaj projektowi nazwę client-app, a następnie wybierz opcję Dalej.

  Wybierz zalecaną platformę docelową lub platformę .NET 6, a następnie wybierz Utwórz.

  Jeśli nie widzisz szablonu projektu aplikacji internetowej ASP.NET Core, musisz zainstalować obciążenie ASP.NET i tworzenie aplikacji internetowych oraz . najpierwobciążenia programistycznego platformy NET Core. Aby zainstalować komponenty, kliknij link Otwórz Instalator programu Visual Studio w lewym okienku okna dialogowego Nowy projekt (wybierz pozycję Plik >Nowy>Projekt). Zostanie uruchomiony Instalator programu Visual Studio. Wybierz wymagane obciążenia.

Konfigurowanie pliku uruchamiania projektu

• Otwórz plik ./Startup.csi dodaj następujące wiersze do metody Configure:

  app.UseDefaultFiles(); // Enables default file mapping on the web root.
  app.UseStaticFiles(); // Marks files on the web root as servable.
  

Instalacja Vue CLI

Aby zainstalować moduł npm vue-cli, otwórz wiersz polecenia i wpisz npm install --g vue-cli lub npm install -g @vue/cli dla wersji 3.0 (obecnie w wersji beta).

Tworzenie szkieletu nowej aplikacji klienckiej przy użyciu interfejsu wiersza polecenia programu Vue

1. Przejdź do wiersza polecenia i zmień bieżący katalog na folder główny projektu.

2. Wpisz vue init webpack client-app i postępuj zgodnie z krokami, gdy pojawi się prośba o odpowiedź na dodatkowe pytania.

   Notatka

   W przypadku plików .vue należy użyć narzędzia webpack lub podobnego frameworku z modułem ładującym w celu przeprowadzenia konwersji. TypeScript i Visual Studio nie wiedzą, jak skompilować pliki .vue. To samo dotyczy tworzenia pakietów; Język TypeScript nie wie, jak przekonwertować moduły ES2015 (czyli instrukcje import i export) na jeden ostatni plik .js do załadowania w przeglądarce. Ponownie pakiet webpack jest najlepszym wyborem tutaj. Aby przeprowadzić ten proces z poziomu programu Visual Studio przy użyciu programu MSBuild, należy rozpocząć od szablonu programu Visual Studio. Obecnie nie ma domyślnego szablonu ASP.NET do tworzenia Vue.js.

Modyfikowanie konfiguracji pakietu webpack w celu wyprowadzania skompilowanych plików do katalogu wwwroot

• Otwórz plik ./client-app/config/index.jsi zmień build.index i build.assetsRoot na ścieżkę wwwroot:

  // Template for index.html
  index: path.resolve(__dirname, '../../wwwroot/index.html'),
  
  // Paths
  assetsRoot: path.resolve(__dirname, '../../wwwroot'),
  

Wskaż projekt do skompilowania aplikacji klienckiej za każdym razem, gdy budowa zostanie uruchomiona.

1. W programie Visual Studio przejdź do Project >właściwości>Build Events.

2. W wierszu polecenia zdarzenia przed kompilacją , wpisz npm --prefix ./client-app run build.

Konfigurowanie nazw modułów wyjściowych pakietu webpack

• Otwórz plik ./client-app/build/webpack.base.conf.jsi dodaj następujące właściwości do właściwości wyjściowej:

  devtoolModuleFilenameTemplate: '[absolute-resource-path]',
  devtoolFallbackModuleFilenameTemplate: '[absolute-resource-path]?[hash]'
  

Dodawanie obsługi języka TypeScript za pomocą interfejsu wiersza polecenia programu Vue

Te kroki wymagają interfejsu vue-cli 3.0, który jest obecnie w wersji beta.

1. Przejdź do wiersza polecenia i zmień bieżący katalog na folder główny projektu.

2. Wpisz vue create client-app, a następnie wybierz Ręcznie wybierz funkcje.

3. Wybierz TypeScript, a następnie wybierz inne żądane opcje.

4. Postępuj zgodnie z pozostałymi krokami i odpowiadaj na pytania.

Konfigurowanie projektu Vue.js dla języka TypeScript

1. Otwórz plik ./client-app/tsconfig.json i dodaj noEmit:true do opcji kompilatora.

   Ustawiając tę opcję, należy unikać zaśmiecania projektu za każdym razem, gdy kompilujesz w programie Visual Studio.

2. Następnie utwórz plik vue.config.js w ./client-app/ i dodaj następujący kod.

   module.exports = {
       outputDir: '../wwwroot',
   
       configureWebpack: {
           output: {
               devtoolModuleFilenameTemplate: '[absolute-resource-path]',
               devtoolFallbackModuleFilenameTemplate: '[absolute-resource-path]?[hash]'
           }
       }
   };
   

   Powyższy kod konfiguruje pakiet webpack i ustawia folder wwwroot.

Tworzenie za pomocą vue-cli 3.0

Nieznany problem z interfejsem vue-cli 3.0 może uniemożliwić automatyzację procesu kompilacji. Za każdym razem, gdy próbujesz odświeżyć folder wwwroot, musisz uruchomić polecenie npm run build w folderze client-app.

Alternatywnie możesz skompilować projekt vue-cli 3.0 jako zdarzenie przed kompilacją przy użyciu właściwości projektu ASP.NET. Kliknij prawym przyciskiem myszy projekt, wybierz pozycję właściwościi włącz następujące polecenia na karcie kompilacji, w polu tekstowym wiersz polecenia zdarzeń przed kompilacją.

cd ./client-app
npm run build
cd ../

Ograniczenia

• atrybut lang obsługuje tylko języki JavaScript i TypeScript. Akceptowane wartości to: js, jsx, ts i tsx.

• lang atrybut nie działa z tagami szablonu ani stylu.

• Debugowanie bloków skryptów w plikach .vue nie jest obsługiwane ze względu na ich wstępnie przetworzony charakter.

• Język TypeScript nie rozpoznaje plików .vue jako modułów. Potrzebny jest plik, który zawiera kod, taki jak poniżej, aby poinformować TypeScript, jak wyglądają pliki .vue (szablon vue-cli 3.0 zawiera już ten plik).

  // ./client-app/vue-shims.d.ts
  declare module "*.vue" {
      import Vue from "vue";
      export default Vue;
  }
  

• Uruchomienie polecenia npm run build jako zdarzenia przed kompilacją we właściwościach projektu nie działa w przypadku korzystania z interfejsu vue-cli 3.0.

Powiązana zawartość

• Przewodnik wprowadzający do Vue.
• projektu Vue CLI.
• Dokumentacja konfiguracji Webpack.