Vytvoření aplikace Vue.js pomocí Nástrojů Node.js pro Visual Studio

Visual Studio podporuje vývoj aplikací pomocí architektury Vue.js v JavaScriptu nebo TypeScriptu.

Následující nové funkce podporují vývoj aplikací Vue.js v sadě Visual Studio:

• Podpora bloků skriptů, stylů a šablon v souborech .vue
• Rozpoznávání atributu lang u souborů .vue
• Šablony projektů a souborů Vue.js

Požadavky

• Musíte mít nainstalovanou sadu Visual Studio 2017 verze 15.8 nebo novější a vývojovou úlohu Node.js.

  Důležité

  Tento článek vyžaduje funkce, které jsou dostupné jenom od sady Visual Studio 2017 verze 15.8.

  Pokud ještě není nainstalovaná požadovaná verze, nainstalujte Visual Studio 2019.

  Pokud potřebujete nainstalovat úlohu, ale sadu Visual Studio už máte, přejděte na Nástroje>Získat nástroje a funkce..., čímž se otevře Instalační program pro Visual Studio. Zvolte úlohu Vývoj aplikací Node.js a pak zvolte Změnit.

• Pokud chcete vytvořit projekt ASP.NET Core, musíte mít nainstalované úlohy vývoje pro ASP.NET a web a .NET Core pro různé platformy.

• Je nutné mít nainstalovaný modul runtime Node.js.

  Pokud ho nemáte nainstalovaný, nainstalujte si verzi LTS z webu Node.js. Obecně platí, že Visual Studio automaticky rozpozná nainstalovaný modul runtime Node.js. Pokud nedetekuje nainstalovaný modul runtime, můžete projekt nakonfigurovat tak, aby odkazoval na nainstalovaný modul runtime na stránce vlastností. (Po vytvoření projektu klikněte pravým tlačítkem myši na uzel projektu a zvolte Vlastnosti).

Vytvoření projektu Vue.js pomocí Node.js

Nové šablony Vue.js můžete použít k vytvoření nového projektu. Použití šablony je nejjednodušší způsob, jak začít. Podrobný postup najdete v tématu Použití sady Visual Studio k vytvoření první aplikace Vue.js.

Vytvoření projektu Vue.js pomocí ASP.NET Core a rozhraní příkazového řádku Vue

Vue.js poskytuje oficiální rozhraní příkazového řádku pro rychlé generování projektů. Pokud chcete k vytvoření aplikace použít rozhraní příkazového řádku, nastavte vývojové prostředí podle kroků v tomto článku.

Důležité

Tyto kroky předpokládají, že už máte zkušenosti s architekturou Vue.js. Pokud ne, navštivte prosím Vue.js a získejte další informace o rozhraní.

Vytvoření nového projektu ASP.NET Core

V tomto příkladu použijete prázdnou aplikaci ASP.NET Core (C#). Můžete si ale vybrat z různých projektů a programovacích jazyků.

Vytvoření prázdného projektu

• Otevřete Visual Studio a vytvořte nový projekt.

  V sadě Visual Studio 2019 zvolte v okně Start vytvořit nový projekt . Pokud úvodní okno není otevřené, zvolte Okno Start souboru>. Zadejte webovou aplikaci, jako jazyk zvolte C# , pak zvolte ASP.NET Jádro prázdné a pak zvolte Další. Na další obrazovce pojmenujte projektovou klientskou aplikaci a pak zvolte Další.

  Zvolte buď doporučenou cílovou architekturu, nebo .NET 6, a pak zvolte Vytvořit.

  Pokud šablonu projektu ASP.NET Core Web Application nevidíte, musíte nainstalovat ASP.NET a úlohu vývoje webu a sadu funkcí .Nejprve je třeba úlohu vývoje pro NET Core. Pokud chcete úlohy nainstalovat, klikněte na odkaz Otevřít Instalační program pro Visual Studio v levém podokně dialogového okna Nový projekt (vyberte Soubor>nový>projekt). Spustí se instalační program pro Visual Studio. Vyberte požadované úlohy.

Konfigurace spouštěcího souboru projektu

• Otevřete soubor ./Startup.cs a do metody Configure přidejte následující řádky:

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

Instalace rozhraní příkazového řádku vue

Pokud chcete nainstalovat modul npm vue-cli, otevřete příkazový řádek a zadejte npm install --g vue-cli nebo zadejte verzi npm install -g @vue/cli 3.0 (aktuálně v beta verzi).

Generování nové klientské aplikace pomocí rozhraní příkazového řádku vue

1. Přejděte na příkazový řádek a změňte aktuální adresář na kořenovou složku projektu.

2. Po zobrazení výzvy k zodpovězení dalších otázek zadejte vue init webpack client-app a postupujte podle pokynů.

   Poznámka:

   V případě souborů .vue musíte k převodu použít Webpack nebo podobnou architekturu s zavaděčem. TypeScript a Visual Studio neví, jak kompilovat soubory .vue . Totéž platí pro sdružování; TypeScript neví, jak převést moduly ES2015 (tj import . příkazy export ) do jediného konečného souboru .js , který se má načíst v prohlížeči. Webpack je opět nejlepší volbou. Pokud chcete tento proces řídit ze sady Visual Studio pomocí nástroje MSBuild, musíte začít ze šablony sady Visual Studio. V současné době neexistuje žádná šablona ASP.NET pro vývoj Vue.js v boxu.

Úprava konfigurace webpacku tak, aby výstupem sestavených souborů na wwwroot

• Otevřete soubor ./client-app/config/index.js a změňte build.index cestu wwwroot a build.assetsRoot na adresu wwwroot:

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

Indikujte projekt, který sestaví klientskou aplikaci pokaždé, když se aktivuje sestavení.

1. V sadě Visual Studio přejděte na Události sestavení vlastností> projektu.>

2. Na příkazovém řádku události před sestavením zadejte npm --prefix ./client-app run build.

Konfigurace názvů výstupních modulů webpacku

• Otevřete soubor ./client-app/build/webpack.base.conf.js a do výstupní vlastnosti přidejte následující vlastnosti:

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

Přidání podpory TypeScriptu pomocí rozhraní příkazového řádku Vue

Tento postup vyžaduje vue-cli 3.0, který je aktuálně v beta verzi.

1. Přejděte na příkazový řádek a změňte aktuální adresář na kořenovou složku projektu.

2. Zadejte vue create client-appa pak zvolte Ručně vybrat funkce.

3. Zvolte Typescript a pak vyberte další požadované možnosti.

4. Postupujte podle zbývajících kroků a odpovězte na otázky.

Konfigurace projektu Vue.js pro TypeScript

1. Otevřete soubor ./client-app/tsconfig.json a přidejte noEmit:true ho do možností kompilátoru.

   Nastavením této možnosti zabráníte nepřehledným projektům při každém sestavení v sadě Visual Studio.

2. Dále vytvořte soubor vue.config.js v souboru ./client-app/ a přidejte následující kód.

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

   Předchozí kód nakonfiguruje Webpack a nastaví složku wwwroot.

Sestavení pomocí vue-cli 3.0

Neznámý problém s vue-cli 3.0 může zabránit automatizaci procesu sestavení. Pokaždé, když se pokusíte aktualizovat složku wwwroot, musíte spustit příkaz npm run build ve složce client-app.

Případně můžete projekt vue-cli 3.0 sestavit jako událost před sestavením pomocí vlastností projektu ASP.NET. Klikněte pravým tlačítkem myši na projekt, zvolte Vlastnosti a do textového pole příkazového řádku události před sestavením vložte následující příkazy.

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

Omezení

• lang atribut podporuje pouze jazyky JavaScript a TypeScript. Akceptované hodnoty jsou: jsx, ts a tsx.

• lang atribut nefunguje se značkami šablony nebo stylu.

• Ladění bloků skriptů v souborech .vue není podporováno z důvodu předzpracované povahy.

• TypeScript nerozpozná soubory .vue jako moduly. Potřebujete soubor, který obsahuje například následující kód, aby typeScriptu řekl, jak vypadají soubory .vue (šablona vue-cli 3.0 už tento soubor obsahuje).

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

• Spuštění příkazu npm run build jako události předběžného sestavení ve vlastnostech projektu nefunguje při použití vue-cli 3.0.

Související obsah

• Příručka Začínáme s Vue.
• Projekt rozhraní příkazového řádku Vue
• Dokumentace ke konfiguraci webpacku