Poznámka:
Přístup k této stránce vyžaduje autorizaci. Můžete se zkusit přihlásit nebo změnit adresáře.
Přístup k této stránce vyžaduje autorizaci. Můžete zkusit změnit adresáře.
V tomto 5-10minutovém úvodu do integrovaného vývojového prostředí (IDE) sady Visual Studio vytvoříte a spustíte jednoduchou Vue.js webovou aplikaci.
Požadavky
Musíte mít nainstalovanou sadu Visual Studio a úlohu vývoje pro Node.js.
Pokud jste visual Studio 2019 ještě nenainstalovali, přejděte na stránku pro stažení sady Visual Studio a nainstalujte si ji zdarma.
Pokud potřebujete nainstalovat úlohu, ale sadu Visual Studio už máte, přejděte do části Nástroje>Získat nástroje a funkce..., čímž se otevře instalační program sady Visual Studio. Zvolte Node.js vývojovou úlohu a pak zvolte Upravit.
Musíte mít nainstalovaný modul runtime Node.js.
Pokud ji nemáte nainstalovanou, doporučujeme nainstalovat verzi LTS z webuNode.js , aby byla co nejlepší kompatibilita s externími architekturami a knihovnami. Node.js je sestavená pro 32bitové a 64bitové architektury. Nástroje Node.js v sadě Visual Studio, které jsou součástí úlohy Node.js, podporují obě verze. Vyžaduje se jenom jeden a instalační program Node.js současně podporuje jenom jednu instalaci.
Obecně platí, že Visual Studio automaticky detekuje nainstalovaný modul runtime Node.js. Pokud nedetekuje nainstalovaný modul runtime, můžete nakonfigurovat projekt tak, aby odkazoval na nainstalovaný modul runtime na stránce vlastností (po vytvoření projektu, klikněte pravým tlačítkem na uzel projektu, zvolte Vlastnosti a nastavte cestuNode.exe). Můžete použít globální instalaci Node.js nebo můžete zadat cestu k místnímu interpretu v každém z vašich Node.js projektů.
Vytvoření projektu
Nejprve vytvoříte projekt webové aplikace Vue.js.
Pokud ještě nemáte nainstalovaný modul runtime Node.js, nainstalujte verzi LTS z webuNode.js .
Další informace najdete v požadavcích.
Otevřete Visual Studio.
Vytvořte nový projekt.
Stisknutím klávesy Esc zavřete úvodní okno. Stiskněte Ctrl + Q pro otevření vyhledávacího pole, zadejte Základní Vue.js, a pak zvolte nějakou Základní Vue.js webovou aplikaci (JavaScript nebo TypeScript). V zobrazeném dialogovém okně zadejte název basic-vuejs a pak zvolte Vytvořit.
Pokud šablonu projektu webové aplikace Basic Vue.js nevidíte, musíte přidat Node.js vývojovou úlohu. Podrobné pokyny najdete v části Požadavky.
Visual Studio vytvoří nový projekt. Nový projekt se otevře v Průzkumníku řešení (pravé podokno).
Zkontrolujte průběh instalace balíčků npm požadovaných pro aplikaci v okně Výstup (dolní podokno).
V Průzkumníku řešení otevřete uzel npm a ujistěte se, že jsou nainstalované všechny uvedené balíčky npm.
Pokud nějaké balíčky chybí (ikona vykřičníku), můžete kliknout pravým tlačítkem na uzel npm a zvolit Nainstalovat chybějící balíčky npm.
Prozkoumání integrovaného vývojového prostředí (IDE)
Podívejte se na Průzkumníka řešení v pravém podokně.
Zvýrazněný tučným písmem je projekt s použitím názvu, který jste zadali v dialogovém okně Nový projekt . Na disku je tento projekt reprezentován souborem .njsproj ve složce projektu.
Na nejvyšší úrovni je řešení, které má ve výchozím nastavení stejný název jako váš projekt. Řešení reprezentované souborem sln na disku je kontejnerem pro jeden nebo více souvisejících projektů.
Uzel npm zobrazuje všechny nainstalované balíčky npm. Kliknutím pravým tlačítkem myši na uzel npm můžete vyhledat a nainstalovat balíčky npm pomocí dialogového okna.
Pokud chcete nainstalovat balíčky npm nebo spustit příkazy Node.js z příkazového řádku, klikněte pravým tlačítkem myši na uzel projektu a zvolte Otevřít příkazový řádek zde.
Přidání souboru .vue do projektu
V Průzkumníku řešení klikněte pravým tlačítkem na libovolnou složku, například složku src/components , a pak zvolte Přidat>novou položku.
Pokud nevidíte všechny šablony položek, zvolte Zobrazit všechny šablonya pak zvolte šablonu položky.
Vyberte buď komponentu jednoho souboru JavaScript Vue nebo komponentu jednoho souboru TypeScript Vue a potom klikněte na Přidat.
Visual Studio přidá nový soubor do projektu.
Sestavení projektu
Dále zvolte Sestavit>Sestavit řešení pro sestavení projektu.
V okně Výstup zobrazte výsledky sestavení a v seznamu Zobrazit výstup zvolte Sestavení.
JavaScript šablony projektů pro Vue.js (a starší verze šablon pro TypeScript) používají build npm skript, který je aktivován konfigurací události po sestavení. Pokud chcete toto nastavení upravit, otevřete soubor projektu (<projectname.njsproj>) z Průzkumníka Windows a vyhledejte tento řádek kódu:
<PostBuildEvent>npm run build</PostBuildEvent>
Spuštění aplikace
Stisknutím kláves Ctrl+F5 (nebo Ladit > Spustit bez ladění) spusťte aplikaci.
V konzole se zobrazí zpráva Spuštění vývojového serveru.
Pak se aplikace otevře v prohlížeči.
Pokud spuštěnou aplikaci nevidíte, aktualizujte stránku.
Zavřete webový prohlížeč.
Blahopřejeme k dokončení tohoto rychlého průvodce! Doufáme, že jste se trochu dozvěděli o používání integrovaného vývojového prostředí sady Visual Studio s Vue.js. Pokud se chcete ponořit hlouběji do jeho schopností, pokračujte kurzem v sekci Kurzy obsahu.