Rövid útmutató: Vue.js projekt létrehozása

Ebben a rövid útmutatóban létrehoz és futtat egy alapszintű Vue.js előtér-webalkalmazást. Ez a cikk 5–10 perces bevezetést nyújt az Visual Studio integrált fejlesztési környezetbe (IDE).

Előfeltételek

A konfiguráció előkészítése a következő előfeltételekkel:

A Vue-alkalmazás létrehozása

Hozzon létre egy Vue.js webalkalmazást az alábbi lépések végrehajtásával:

  1. A Visual Studio Start ablakban (válassza a Fájlindító>ablak) válassza az Új projekt létrehozása lehetőséget.

    Képernyőkép az

    Képernyőkép az

  2. Az Új projekt létrehozása párbeszédpanelen írja be a Vue kifejezést a keresőmezőbe. Válassza ki a JavaScripthez vagy TypeScripthez készült Vue alkalmazássablont , és válassza a Tovább lehetőséget.

    Képernyőkép a JavaScripthez vagy TypeScripthez készült Vue-sablon kiválasztásáról.

    Képernyőkép a JavaScripthez vagy TypeScripthez készült Vue-sablon kiválasztásáról.

    A 2022.Visual Studio 11-es és újabb verziójában az önálló JavaScript Vue Project sablonnév Vue-alkalmazásra változik.

  3. Adja meg a projekt és a megoldás nevét, és válassza a Létrehozás lehetőséget.

Várjon, amíg Visual Studio hozza létre az új projektet.

A projekt tulajdonságainak megtekintése

Az alapértelmezett projektbeállítások lehetővé teszik a projekt összeállítását és hibakeresését.

Ha módosítani szeretné a beállításokat, kövesse az alábbi lépéseket:

  1. Kattintson a jobb gombbal a projektre a Megoldáskezelő, és válassza a Tulajdonságok lehetőséget.

  2. A projekttulajdonságok panelen válassza a Hibakeresés, a Linting, a Build vagy az Üzembe helyezés lehetőséget a megfelelő tulajdonságok megtekintéséhez.

Hibakereső konfigurációhoz használja a launch.json fájlt.

Jegyzet

A launch.json hibakereső konfigurációs fájlja a Hibakeresés eszköztáron tárolja a Start művelethez társított indítási beállításokat. A launch.json fájlnak a .vscode projekt mappájában kell lennie.

A projekt felépítése

Az új projekt összeállításához válassza a Build>Build Solution lehetőséget.

A projekt indítása

Válassza az F5 lehetőséget, vagy használja az ablak tetején található Start műveletet.

A projekt egy parancssort nyit meg a következő szöveggel (vagy hasonló szöveggel):

VITE v4.4.9 ready in 780 ms

Jegyzet

Ellenőrizze a konzol kimenetében az üzeneteket, például a Node.jsverziójának frissítésére vonatkozó utasításokat.

Ha a folyamat sikeres, megnyílik az alap Vue.js alkalmazás.

Következő lépés