Megjegyzés
Az oldalhoz való hozzáféréshez engedély szükséges. Megpróbálhat bejelentkezni vagy módosítani a címtárat.
Az oldalhoz való hozzáféréshez engedély szükséges. Megpróbálhatja módosítani a címtárat.
A Visual Studio integrált fejlesztési környezetének (IDE) 5–10 perces bevezetőjében egy egyszerű Vue.js webalkalmazást fog létrehozni és futtatni.
Előfeltételek
Telepítve kell lennie a Visual Studio-nak és a Node.js fejlesztési számítási feladatnak.
Ha még nem telepítette a Visual Studio 2019-et, lépjen a Visual Studio letöltési oldalára, és telepítse ingyenesen.
Ha telepítenie kell a számítási feladatot, de már rendelkezik Visual Studióval, lépjen az Eszközök lekérése>eszközök és szolgáltatások elemre, amely megnyitja a Visual Studio Installert. Válassza ki a Node.js fejlesztési számítási feladatot, majd válassza a Módosítás lehetőséget.
Telepítve kell lennie a Node.js futtatókörnyezetnek.
Ha nincs telepítve, javasoljuk, hogy telepítse az LTS-verziót a Node.js webhelyről a külső keretrendszerekkel és kódtárakkal való legjobb kompatibilitás érdekében. Node.js 32 bites és 64 bites architektúrákhoz készült. A Node.js számítási feladat részét képező Node.js Visual Studio-eszközök mindkét verziót támogatják. Csak egyre van szükség, és a Node.js telepítője csak egy telepítést támogat egyszerre.
A Visual Studio általában automatikusan észleli a telepített Node.js futtatókörnyezetet. Ha nem észlel telepített futtatókörnyezetet, konfigurálhatja a projektet úgy, hogy a tulajdonságok lapon hivatkozzon a telepített futtatókörnyezetre (a projekt létrehozása után kattintson a jobb gombbal a projektcsomópontra, válassza a Tulajdonságok lehetőséget, és állítsa be a Node.exe elérési utat). Használhatja a Node.js globális telepítését, vagy megadhatja a helyi értelmező elérési útját az egyes Node.js projektekben.
Projekt létrehozása
Először egy Vue.js webalkalmazás-projektet fog létrehozni.
Ha még nincs telepítve a Node.js futtatókörnyezet, telepítse az LTS-verziót a Node.js webhelyről.
További információkért tekintse meg az előfeltételeket.
Nyissa meg a Visual Studiót.
Új projekt létrehozása.
A kezdőablak bezárásához nyomja le Esc. A keresőmező megnyitásához írja be a Ctrl + Q billentyűkombinációt, írja be az Alapszintű Vue.js, majd válassza az Alapszintű Vue.js webalkalmazást (JavaScript vagy TypeScript). A megjelenő párbeszédpanelen írja be a basic-vuejs nevet, majd válassza a Létrehozás lehetőséget.
Ha nem látja az Alapszintű Vue.js webalkalmazás-projektsablont, hozzá kell adnia a Node.js fejlesztési munka csomagot. Részletes útmutatásért tekintse meg az előfeltételeket.
A Visual Studio létrehozza az új projektet. Az új projekt megnyílik a Megoldáskezelőben (jobb oldali ablaktáblán).
Ellenőrizze a Kimeneti ablak (alsó ablaktábla) állapotát az alkalmazáshoz szükséges npm-csomagok telepítésével kapcsolatban.
A Megoldáskezelőben nyissa meg az npm csomópontot, és győződjön meg arról, hogy az összes felsorolt npm-csomag telepítve van.
Ha valamelyik csomag hiányzik (felkiáltójel ikon), kattintson a jobb gombbal az npm csomópontra, és válassza a Hiányzó npm-csomagok telepítése lehetőséget.
Az IDE felfedezése
Tekintse meg a Megoldáskezelőt a jobb oldali panelen.
A projektet félkövérrel kiemeltük, azzal a névvel, amelyet az Új projekt párbeszédpanelben megadtál. A lemezen ezt a projektet egy .njsproj fájl képviseli a projektmappában.
A felső szinten van egy megoldás, amelynek alapértelmezés szerint ugyanaz a neve, mint a projektnek. Egy megoldás, amelyet a lemezen lévő sln-fájl képvisel, egy vagy több kapcsolódó projekt tárolója.
Az npm-csomópont megjeleníti a telepített npm-csomagokat. Az npm-csomópontra a jobb gombbal kattintva kereshet és telepíthet npm-csomagokat egy párbeszédpanel használatával.
Ha npm-csomagokat szeretne telepíteni, vagy Node.js parancsokat szeretne futtatni egy parancssorból, kattintson a jobb gombbal a projektcsomópontra, és válassza a Parancssor megnyitása parancsot.
.vue fájl hozzáadása a projekthez
A Megoldáskezelőben kattintson a jobb gombbal bármelyik mappára, például az src/components mappára, majd válassza az Új elem hozzáadása>parancsot.
Ha nem látja az összes elemsablont, válassza Az összes sablon megjelenítéselehetőséget, majd válassza ki az elemsablont.
Válassza ki a JavaScript Vue egyfájlos összetevőt vagy a TypeScript Vue egyfájlos összetevőt, majd kattintson a Hozzáadás gombra.
A Visual Studio hozzáadja az új fájlt a projekthez.
A projekt felépítése
Ezután válassza a Build>Build megoldás lehetőséget a projekt létrehozásához.
A Kimenet ablakban megtekintheti a builderedményeket, és válassza a Build lehetőséget a Kimenet megjelenítése listából .
A JavaScript Vue.js projektsablon (és a TypeScript-sablon régebbi verziói) az build npm-szkriptet használják a buildelés utáni esemény konfigurálásával. Ha módosítani szeretné ezt a beállítást, nyissa meg a projektfájlt (<projectname.njsproj>) a Windows Intézőből, és keresse meg a következő kódsort:
<PostBuildEvent>npm run build</PostBuildEvent>
Az alkalmazás futtatása
Nyomja le a Ctrl+F5 (vagy Futtatás hibakeresés nélkül>) az alkalmazás futtatásához.
A konzolon megjelenik egy üzenet, amely elindítja a fejlesztőkiszolgálót.
Ezután megnyílik az alkalmazás egy böngészőben.
Ha nem látja a futó alkalmazást, frissítse a lapot.
Zárja be a webböngészőt.
Gratulálunk a quickstart útmutató befejezéséhez! Reméljük, hogy tanult egy kicsit a Visual Studio IDE és Vue.jshasználatával kapcsolatban. Ha mélyebbre szeretné ásni a képességeit, folytassa a tartalomjegyzék Oktatóanyagok szakaszának oktatóanyagával.