Sdílet prostřednictvím

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

  • Článek

Visual Studio podporuje vývoj aplikací s architekturou 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
  • Vue.js šablony projektů a souborů

Požadavky

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

    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 Tools>Získat nástroje a funkce..., čímž se otevře instalační program sady Visual Studio. Zvolte Node.js úlohy vývoje a pak zvolte Upravit.

  • 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.

  • Musíte mít nainstalovaný modul runtime Node.js.

    Pokud ji nemáte nainstalovanou, nainstalujte verzi LTS z webu Node.js. Obecně platí, že Visual Studio automaticky detekuje 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 Vytvoření první Vue.js aplikacepomocí sady Visual Studio.

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

Vue.js poskytuje oficiální příkazový nástroj pro rychlé vytváření struktury 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, abyste se dozvěděli více o frameworku.

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 Vytvořit nový projekt v úvodním okně. Pokud není spouštěcí okno otevřené, zvolte Soubor>Spouštěcí okno. Zadejte webovou aplikaci, jako jazyk zvolte C#, pak zvolte ASP.NET Core Prázdný, a pak zvolte Další. Na další obrazovce nazvěte projekt client-appa 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 nejprve nainstalovat pracovní zátěž ASP.NET a vývoj webu a poté pracovní zátěž pro vývoj.NET Core. Pokud chcete nainstalovat pracovní zátěže, klikněte na odkaz Otevřít instalační program sady Visual Studio v levém panelu dialogového okna Nový projekt (vyberte Soubor>Nový>Projekt). Spustí se instalační program sady Visual Studio. Vyberte požadované úlohy.

Konfigurace spouštěcího souboru projektu

  • Otevřete soubor ./Startup.csa 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 npm install -g @vue/cli pro verzi 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. Zadejte vue init webpack client-app a postupujte podle pokynů, až se zobrazí výzva k zodpovězení dalších otázek.

    Poznámka

    Pro .vue soubory musíte k převodu použít webpack nebo podobný framework se 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. příkazy import a export) do jednoho konečného .js souboru, který se má načíst v prohlížeči. Znovu, webpack je nejlepší volbou zde. 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 základu.

Upravte konfiguraci webpacku tak, aby se sestavené soubory ukládaly do složky wwwroot.

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

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

// Paths
assetsRoot: path.resolve(__dirname, '../../wwwroot'),

Uveďte projekt pro sestavení klientské aplikace pokaždé, když se vyvolá nové sestavení.

  1. Ve Visual Studio přejděte na Projekt - Vlastnosti>>Události při sestavení.

  2. Na příkazový řádek události před sestavenímzadejte npm --prefix ./client-app run build.

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

  • Otevřete soubor ./client-app/build/webpack.base.conf.jsa 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 potom zvolte Ruční výběr funkcí.

  3. Zvolte TypeScripta 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 do možností kompilátoru přidejte noEmit:true.

    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 ./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 klientské aplikace.

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 Vlastnostia na kartě Sestavení v textovém poli 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í

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

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

  • Ladění skriptových bloků v souborech .vue není podporováno kvůli jejich předzpracované povaze.

  • TypeScript nerozpozná .vue soubory jako moduly. Potřebujete soubor, který obsahuje například následující kód, aby typeScriptu řekl, jak .vue soubory vypadají (š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álost předběžného sestavení ve vlastnostech projektu nefunguje při použití vue-cli 3.0.

Související obsah