Bootstrap on yksi maailman suosituimmista käyttöliittymän CSS-kehyksistä, joka tarjoaa monia komponentteja tai suunnittelumalleja nopeasti ja nopeasti reagoivien verkkosovellusten luomiseksi. Se on avoimen lähdekoodin ja vapaasti käytettävissä oleva kehys nykyaikaisten verkkosivustojen rakentamiseen, jotka on rikastettu HTML- ja CSS-malleilla tai käyttöliittymäelementeillä, kuten painikkeilla, kuvakkeilla ja lomakkeilla. Tässä viestissä opimme ensin asentamaan ja sitten käyttämään Bootstrapia Vue: n kanssa.js Framework.
Bootstrapin asennus
On olemassa "bootstrap-vue" -kirjasto, joka on rakennettu erityisesti Vuelle.js ja sitä voidaan käyttää Vue-komponentteina, joilla on samat ominaisuudet kuin Bootstrapilla. Ennen kuin aloitat "bootstrap" - tai "bootstrap-vue" -asennuksen, oletetaan, että olet perehtynyt HTML-, CSS- ja Javascript-ohjelmiin, olet asentanut Vue-projektin ja sinulla on hyvä editori asennettuna järjestelmään kuten VS-koodi. Jos et ole vielä määrittänyt Vue-projektia, voit asentaa Vue-projektin nopeasti noudattamalla alla olevia ohjeita.
Määritä Vue-projekti
Määritä Vue-projekti tarkistamalla ensin, onko Vue.js on asennettu järjestelmääsi tai ei, kirjoittamalla alla annettu komento:
Jos et ole vielä asentanut sitä, kirjoita alla annettu komento asentaaksesi Vue.js maailmanlaajuisesti käyttöjärjestelmässäsi:
$ npm asenna -g @ vue / cli
Kun Vue on asennettu onnistuneesti.js maailmanlaajuisesti käyttöjärjestelmässäsi, luo Vue-projekti kirjoittamalla alla annettu komento “vue create” ja sen jälkeen projektin nimi:
$ vue luo vue-project-name
Se pyytää sinua joko valitsemaan esiasetuksen tai valitsemaan oman mukautetun esiasetuksen Vue-projektille.
Kun olet määrittänyt tai valinnut oletusasetuksen, Vue-projekti luodaan hetken kuluttua.
Kun olet luonut Vue-projektin, siirry äskettäin luodun projektin hakemistoon komennolla “cd”.
$ cd vueprojectname
Tässä vaiheessa olet määrittänyt Vue-projektin onnistuneesti.
Asenna Bootstrap
Kun järjestelmä on valmis ja Vue-projekti on määritetty! Voit asentaa “bootstrap-vue” langalla tai NPM: llä. Jos haluat asentaa yksinkertaisen "bootstrapin" muotoilutarkoituksiin, voit asentaa ne kirjoittamalla alla olevan komennon.
Asenna 'bootstrap-vue' ja 'bootstrap' Lanka-paketinhallinnalla kirjoittamalla alla annettu komento:
$ lanka lisää bootstrap bootstrap-vueTAI
Asenna 'bootstrap-vue' ja 'bootstrap' NPM-paketinhallinnan avulla kirjoittamalla alla oleva komento:
$ npm asenna bootstrap bootstrap-vue --save
Hyvä on! Kun 'bootstrap' ja 'bootstrap-vue' on asennettu, sinun on otettava ne käyttöön pääosassa.js-tiedosto.
tuo BootstrapVue tiedostosta 'bootstrap-vue / dist / bootstrap-vue.esm ';tuo 'bootstrap-vue / dist / bootstrap-vue.css ';
tuo 'bootstrap / dist / css / bootstrap.css ';
Vue.käytä (BootstrapVue);
Kun olet ottanut käyttöön "bootstrap" ja "bootstrap-vue", voit nyt käyttää niitä Vue-projektissasi.
Bootstrapin käyttö Vue-ohjelmassa
Käyttääksesi Bootstrapia Vuen kanssa, 'bootstrap-vue' tarjoaa useita komponentteja käytettäväksi Vue-komponenttina. Esimerkiksi painike voidaan luoda käyttämällä tällaista 'bootstrap-vue'.
Jos haluat tietää lisää komponenteista, käy vapaasti BootstrapVuen virallisella dokumentaatiosivulla.
Näin yksinkertainen on asentaa ja aloittaa bootstrapin käyttö Vue-projektissa.
Johtopäätös
Bootstrap on yleinen CSS-käyttöliittymäkirjasto, jota käytetään mobiilikäyttöisten ja reagoivien verkkosovellusten rakentamiseen, ja BootstrapVuen avulla voimme rakentaa tällaisia verkkosovelluksia Vue-ohjelmalla. Tässä viestissä käymme läpi BootstrapVue-asennuksen Vue-ohjelmassa.js-projekti ja katso myös, miten se voidaan ottaa käyttöön ja käyttää. Tällaisten kahden vankan kirjaston yhdistelmällä voimme nopeuttaa kehitysprosessia ja kaunistaa verkkosovellustamme korkeimpiin rajoihin.