Phenquestions
A Bootstrap a világ egyik legnépszerűbb front-end CSS keretrendszere, amely számos összetevőt vagy tervezősablont kínál gyors és gyors reagálású webalkalmazások létrehozásához. Ez egy nyílt forráskódú és ingyenesen használható keretrendszer modern, HTML és CSS sablonokkal vagy felhasználói felület elemekkel, például gombokkal, ikonokkal és űrlapokkal gazdagított webhelyek felépítéséhez. Ebben a bejegyzésben először megtanuljuk telepíteni, majd használni a Bootstrap-ot a Vue-val.js keretrendszer.
A Bootstrap telepítése
Van egy „bootstrap-vue” könyvtár, amely kifejezetten a Vue számára készült.js és használhatók Vue komponensekként, ugyanazokkal a tulajdonságokkal, mint a Bootstrap. Mielőtt elkezdené a „bootstrap” vagy a „bootstrap-vue” telepítést, feltételezzük, hogy ismeri a HTML, CSS és Javascript programot, beállította a Vue projektet, és egy jó szerkesztő van telepítve a rendszerére mint a VS-kód. Ha még nem állította be a Vue projektet, akkor kövesse az alábbi eljárást a Vue projekt gyors beállításához.
A Vue Project beállítása
A Vue projekt beállításához először ellenőrizze, hogy a Vue.A js telepítve van a rendszerére vagy sem, az alább megadott parancs beírásával:
Ha még nem telepítette, írja be az alábbi parancsot a Vue telepítéséhez.js globálisan az operációs rendszeren:
$ npm telepítés -g @ vue / cli
A Vue sikeres telepítése után.js globálisan az operációs rendszeren, hozza létre a Vue projektet az alább megadott „vue create” parancs beírásával, majd a projekt nevével:
$ vue create vue-project-name
Megkéri, hogy válassza ki az előre beállított értéket, vagy válassza ki a saját egyéni beállítását a Vue projekthez.
Az alapértelmezett preset konfigurálása vagy kiválasztása után egy idő után létrejön a Vue projekt.
A Vue projekt létrehozása után a „cd” paranccsal navigáljon az újonnan létrehozott projekt könyvtárába.
$ cd vueprojectname
Ebben a szakaszban sikeresen beállította a Vue projektet.
Telepítse a Bootstrap programot
Miután a rendszer készen áll, és a Vue projekt be van állítva! Telepítheti a „bootstrap-vue” fonalat vagy NPM-et. Ha stílusos célból szeretné telepíteni az egyszerű „bootstrap” -t, akkor telepítéséhez írja be az alább megadott parancsot.
A „bootstrap-vue” és a „bootstrap” telepítéséhez a Fonal csomagkezelő használatával írja be az alábbi parancsot:
$ yarn add bootstrap bootstrap-vueVAGY
A „bootstrap-vue” és a „bootstrap” telepítéséhez az NPM csomagkezelő használatával írja be az alábbi parancsot:
$ npm telepítse a bootstrap bootstrap-vue --save fájlt
Rendben! A „bootstrap” és a „bootstrap-vue” telepítése után ezeket főként engedélyeznie kell.js fájl.
importálja a BootstrapVue fájlt a 'bootstrap-vue / dist / bootstrap-vue fájlból.esm ';import 'bootstrap-vue / dist / bootstrap-vue.css ';
import 'bootstrap / dist / css / bootstrap.css ';
Vue.use (BootstrapVue);
A „bootstrap” és a „bootstrap-vue” engedélyezése után mostantól felhasználhatja őket a Vue projektben.
A Bootstrap használata a Vue-ban
A Bootstrap és a Vue együttes használatához a „bootstrap-vue” különféle összetevőket kínál Vue komponensként. Például egy gomb létrehozható az ilyen 'bootstrap-vue' segítségével.
Ha további összetevőkről szeretne tudni, látogasson el nyugodtan a BootstrapVue hivatalos dokumentációs oldalára.
Így egyszerű telepíteni és elkezdeni használni a bootstrap-ot egy Vue-projektben.
Következtetés
A Bootstrap egy elterjedt CSS front-end könyvtár, amelyet mobilalkalmazások és adaptív webalkalmazások építésére használnak, és a BootstrapVue segítségével ilyen webalkalmazásokat készíthetünk a Vue segítségével. Ebben a bejegyzésben végigjárjuk a BootstrapVue telepítését egy Vue-ban.js projekt, és nézze meg, hogyan lehet engedélyezni és használni. Ilyen két robusztus könyvtár kombinációjával felgyorsíthatjuk a fejlesztési folyamatot, és a legmagasabb határokig szépíthetjük webalkalmazásunkat.
