Oktatóanyag: Vue.js kezdőknek

Ha teljesen új a Vue.jshasználata, ez az útmutató segít az alapismeretek megismerésében.

• Próbálja ki a Vue.js HelloWorld-kód tesztkörnyezetét
• Próbáld meg használni a Node.js-et a Visual Studio Code-ban

Előfeltételek

• Először telepítenie kell Vue.js a Windows-re vagy a Windows alrendszer Linuxhoz-re.

A NodeJS kipróbálása a Visual Studio Code-tal

Ha még nem rendelkezik vele, telepítse a VS Code. Javasoljuk, hogy telepítse a VS Code-ot Windows rendszeren, függetlenül attól, hogy a Vue-t Windowson vagy WSL-n szeretné-e használni.

1. Nyissa meg a parancssort, és hozzon létre egy új könyvtárat: mkdir HelloVue, majd adja meg a következő könyvtárat: cd HelloVue

2. A Vue parancssori felület telepítése: npm install -g @vue/cli

3. A Vue-alkalmazás létrehozása: vue create hello-vue-app

   Önnek el kell döntenie, hogy a Vue 2-t vagy a Vue 3 előzetesthasználja, vagy saját kezűleg válassza ki a kívánt funkciókat.

   

4. Nyissa meg az új hello-vue-app könyvtárát: cd hello-vue-app

5. Próbálja meg futtatni az új Vue-alkalmazást a webböngészőben: npm run serve

   A böngészőben a http://localhost:8080-en az "Üdvözöljük a(z) Vue.js alkalmazásban" szövegnek kell megjelennie. Nyomja le a Ctrl+C-t a vue-cli-service kiszolgáló leállításához.

   Megjegyzés:

   Ha ehhez az oktatóanyaghoz WSL-t (Ubuntu vagy kedvenc Linux-disztribúcióval) használ, győződjön meg arról, hogy telepítve van a Remote - WSL Extension a legjobb élmény érdekében, amikor a kódot a VS távoli kiszolgálóval futtatja és szerkeszti.

6. Próbálja meg frissíteni az üdvözlő üzenetet a Vue-alkalmazás forráskódjának VS Code-ban való megnyitásával, írja be a következőt: code .

7. A VS Code elindítja és megjeleníti a Vue-alkalmazást a Fájlkezelőben. Futtassa ismét az alkalmazást a terminálon a npm run serve paraméterrel, és nyissa meg a böngészőt a localhostra, hogy lássa a Vue oldal üdvözlőlapját megjelenve. Keresse meg a App.vue fájlt a VS Code-ban. Próbálja meg az "Üdvözöljük a(z) Vue.js alkalmazásban" szöveget "Üdvözöljük a dzsungelben!" értékre változtatni. Amint menti a módosítást, megjelenik a Vue-alkalmazás "gyakori újratöltése".

   

További erőforrások

• A Vue használata a Visual Studio Code-ban: További információ a Vue VS Code-tal való használatáról, beleértve a Vue szintaxiskiemelését biztosító Vetur bővítményt, az IntelliSense-t, a hibakeresési támogatást stb.

• Vue.js dokumentumok

• Vue összehasonlítása más keretrendszerekkel, például a React vagy az Angular

• Vue.js áttekintés

• Első lépések Vue.js képzési tervvel