Rychlý start: Vytvoření projektu Vue.js

V tomto rychlém startu vytvoříte a spustíte základní Vue.js front-endovou webovou aplikaci. Tento článek obsahuje 5 až 10minutový úvod do integrovaného vývojového prostředí (IDE) Visual Studio.

Požadavky

Připravte konfiguraci s následujícími požadavky:

• Visual Studio 2022 nebo novější (získejte bezplatnou verzi na Visual Studio ke stažení)

• npm (součástí Node.js, https://www.npmjs.com/)

• Vue.js ( instalace| Vue.js (vuejs.org))

Vytvoření aplikace Vue

Pomocí následujícího postupu vytvořte webovou aplikaci Vue.js:

1. V okně Visual Studio Start (vyberte Soubor>Start Window) vyberte Vytvořit nový projekt.

   

   

2. V dialogovém okně Vytvořit nový projekt zadejte do vyhledávacího pole Vue . Vyberte šablonu aplikace Vue pro JavaScript nebo TypeScript a vyberte Další.

   

   

   V Visual Studio 2022 verze 11 a novější se název šablony Standalone JavaScript Vue Project změní na Vue App.

3. Zadejte název projektu a řešení a vyberte Vytvořit.

Počkejte, až Visual Studio vytvoří nový projekt.

Zobrazení vlastností projektu

Výchozí nastavení projektu umožňuje sestavit a ladit projekt.

Pokud chcete změnit nastavení, postupujte takto:

1. Klikněte pravým tlačítkem na projekt v Průzkumník řešení a vyberte Properties.

2. V podokně vlastností projektu vyberte Ladění, Lintování, Sestavení nebo Nasazení, aby se zobrazily příslušné vlastnosti.

Pro konfiguraci ladicího programu použijte souborlaunch.json .

Sestavení projektu

Chcete-li sestavit nový projekt, vyberte Sestavit>Sestavit řešení.

Zahájení projektu

Vyberte F5 nebo použijte akci Start v horní části okna.

Projekt otevře příkazový řádek s následujícím textem (nebo podobným):

VITE v4.4.9 ready in 780 ms

Po úspěšném dokončení procesu se otevře základní Vue.js aplikace.

Další krok