Jak dołączyć Bootstrap-Vue do Laravel

5
Santanu Biswas 2019-04-30 20:47.

Jak mogę zainstalować / zaimportować / dołączyć Bootstrap Vue do mojego laravelprojektu? Jestem nowy w Vue, wiem, jak zainstalować w Vue JSaplikacji, ale jak mogę ją dodać laravel?

app.scss

// Fonts
@import url("https://fonts.googleapis.com/css?family=Nunito");

// Variables
@import "variables";

// Bootstrap
@import "~bootstrap/scss/bootstrap";

@import "node_modules/bootstrap/scss/bootstrap";
@import "node_modules/bootstrap-vue/src/index.scss";

.navbar-laravel {
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

app.js

    /**
     * First we will load all of this project's JavaScript dependencies which
     * includes Vue and other libraries. It is a great starting point when
     * building robust, powerful web applications using Vue and Laravel.
     */

    require("./bootstrap")

    window.Vue = require("vue")

    import BootstrapVue from "bootstrap-vue" //Importing

    Vue.use(BootstrapVue) // Teslling Vue to use this whole application

    /**
    * The following block of code may be used to automatically register your
    * Vue components. It will recursively scan this directory for the Vue
    * components and automatically register them with their "basename".
    *
    * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
    */

    // const files = require.context('./', true, /\.vue$/i);
    // files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default));

    Vue.component(
        "example-component",
        require("./components/ExampleComponent.vue").default
    )

    /**
    * Next, we will create a fresh Vue application instance and attach it to
    * the page. Then, you may begin adding components to this application
    * or customize the JavaScript scaffolding to fit your unique needs.
    */

    const app = new Vue({
        el: "#app"
    })
laravel vue.js bootstrap-vue

3 answers

13
Karan Sadana 2019-04-30 21:11.

Możesz to zrobić po prostu przez node i npm. zainstaluj węzeł w swoim systemie. a następnie otwórz terminal z katalogu głównego projektu, tak jak robisz to z laravelem do uruchamiania poleceń rzemieślnika.

po otwarciu terminala. po prostu biegnij

npm i bootstrap-vue // you can also give save falg to save in package.json file

Tutaj nie instaluję vue .beac, ponieważ jest on już zainstalowany w laravel, jeśli sprawdzisz plik app.js w swoim resourceskatalogu i po pomyślnym zainstalowaniu możesz go zaimportować do pliku app.js przez

import BootstrapVue from 'bootstrap-vue' //Importing

Vue.use(BootstrapVue) // Telling Vue to use this in whole application

W przypadku css możesz to zaimportować po prostu

@import 'node_modules/bootstrap/scss/bootstrap';
@import 'node_modules/bootstrap-vue/src/index.scss';

w app.scss

Po zakończeniu konfiguracji konfiguracji uruchom

npm run dev // tutajwebpack wykonuje swoją pracę

lub jeśli jesteś w produkcji, możesz to zrobić przez

npm run production

2
Manu 2019-04-30 21:10.

Po prostu uruchom npm i vue bootstrap-vue bootstrapw folderze, w którym masz pakiet.json lub ręcznie zmień pakiet.json. Następnie musisz dodać do./resources/assets/js/bootstrap.js 

import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'

Vue.use(BootstrapVue)
0
Andrea Mauro 2019-10-07 03:33.

Zainstaluj pakiet z

npm install bootstrap-vue

lub

yarn add bootstrap-vue

Następnie możesz uwzględnić swoją bibliotekę globalnie, dodając ten wiersz do swoich zasobów \ js \ app.js powindow.Vue = require('vue');

Vue.use(require('bootstrap-vue'));

Możesz zapoznać się z oficjalną dokumentacją Vue dotyczącą instalacji wtyczek

Japanese Spanish German French Thai Portuguese Russian Vietnamese Italian Korean Turkish Indonesian Polish Hindi

Related questions

MORE COOL STUFF

Jana Duggar: Wszystko, co powiedziała o miłości i jej 5-letnie okno na znalezienie „jednego”

Jana Duggar: Wszystko, co powiedziała o miłości i jej 5-letnie okno na znalezienie „jednego”

Jana Duggar otwarcie mówiła o swoich poszukiwaniach miłości. Oto wszystko, co powiedziała na ten temat i jej pięcioletnie okno na małżeństwo.

2023-06-12.

Sam Heughan dokładnie wie, co weźmie z zestawu „Outlander” - „Czuję się, jakbym był Jamiem, kiedy je zakładam”

Sam Heughan dokładnie wie, co weźmie z zestawu „Outlander” - „Czuję się, jakbym był Jamiem, kiedy je zakładam”

Gwiazda „Outlandera”, Sam Heughan, niedawno ujawnił, co zabierze z planu, aby upamiętnić Jamiego Frasera, rolę, która uczyniła go gwiazdą.

2023-06-12.

Piosenka wczesnych Beatlesów, która była jednym z „najbardziej ekscytujących występów” zespołu, według Insidera Fab Four

Piosenka wczesnych Beatlesów, która była jednym z „najbardziej ekscytujących występów” zespołu, według Insidera Fab Four

„She Loves You” została napisana w godzinę, nagrana w jeden dzień i była piosenką The Beatles z jednym z ich najlepszych wykonań w karierze.

2023-06-11.

Dolly Parton pomogła swojej „inwalidzkiej” babci, gdy żadne inne wnuki by tego nie zrobiły - ona też zrobiła jej psikusa

Dolly Parton pomogła swojej „inwalidzkiej” babci, gdy żadne inne wnuki by tego nie zrobiły - ona też zrobiła jej psikusa

Dolly Parton i jej babcia Bessie miały szczególny związek. Babcia Parton była bardzo chora, ale to nie powstrzymało Dolly przed zrobieniem jej psikusa.

2023-06-11.

Jakie jest najtwardsze drewno na świecie?

Jakie jest najtwardsze drewno na świecie?

Można by pomyśleć, że dąb lub hikora są wytrzymałe, ale jeśli chodzi o najtwardsze drewno na świecie, to nawet się do nich nie zbliżają.

2025-10-29.

10 najstraszniejszych stworzeń morskich kryjących się w głębinach oceanu

10 najstraszniejszych stworzeń morskich kryjących się w głębinach oceanu

Ocean jest pełen piękna, ale kryje też jedne z najstraszniejszych stworzeń morskich na świecie. Wiele z nich czai się głęboko pod powierzchnią oceanu, w mrocznym, podciśnieniowym świecie głębin morskich.

2025-10-29.

10 najlepszych zaklęć miecza w grze Minecraft

10 najlepszych zaklęć miecza w grze Minecraft

Jeśli walczysz z wrogimi mobami lub przygotowujesz się do scenariuszy PvP, znajomość najlepszych zaklęć miecza w Minecrafcie może dać ci znaczną przewagę. Zaklinanie mieczy pozwala zadawać większe obrażenia, zwiększać liczbę przedmiotów wypadających z potworów i wydłużać trwałość miecza.

2025-10-29.

13 krajów socjalistycznych, które wyglądają zupełnie inaczej

13 krajów socjalistycznych, które wyglądają zupełnie inaczej

Kiedy ludzie mówią o krajach socjalistycznych, często wyobrażają sobie pełną kontrolę rządu i brak własności prywatnej. Jednak w praktyce gospodarki socjalistyczne są bardzo zróżnicowane.

2025-10-29.

Podsumowanie Niedźwiedzia: Czy Marcus jest najmilszym, najłagodniejszym i najszczerszym mężczyzną w Chicago?

Podsumowanie Niedźwiedzia: Czy Marcus jest najmilszym, najłagodniejszym i najszczerszym mężczyzną w Chicago?

W „Children” pojawia się epizod ze znanym nazwiskiem i kilka druzgocących wiadomości

2024-07-03 19:12.

Czy za 9800 dolarów „zapakowałbyś ich” do tej siedmiomiejscowej Toyoty RAV4 z 2008 roku?

Czy za 9800 dolarów „zapakowałbyś ich” do tej siedmiomiejscowej Toyoty RAV4 z 2008 roku?

Uważa się, że ten RAV4 jest w doskonałym stanie i jest przygotowany do gry w muzyczne krzesła.

2024-07-03 19:04.

Furgonetka dostawcza Amazon zapala się w wyniku ognistej eksplozji podczas letnich upałów w Houston

Furgonetka dostawcza Amazon zapala się w wyniku ognistej eksplozji podczas letnich upałów w Houston

Na nagraniu z drona uchwycono strażaków, którzy najwyraźniej walczyli o ugaszenie pożaru.

2024-07-03 19:04.

Marvel's Black Panther Show będzie najważniejszym serialem animowanym w historii

Marvel's Black Panther Show będzie najważniejszym serialem animowanym w historii

Eyes of Wakanda jest bezpośrednio powiązany z MCU, a także aktualizacje X-Men '97, What If..., Daredevil i nie tylko.

2024-07-03 19:03.

Aktorzy serialu Laguna Beach: Gdzie są teraz?

Aktorzy serialu Laguna Beach: Gdzie są teraz?

„Laguna Beach” opowiadało o życiu licealistów Lauren Conrad, Kristin Cavallari, Stephena Collettiego i innych w połowie lat 2000. Oto, gdzie obecnie znajdują się członkowie obsady reality show MTV.

2024-07-15.

Historia randek Avy Gardner: spojrzenie wstecz na małżeństwa i romanse ikony Hollywood

Historia randek Avy Gardner: spojrzenie wstecz na małżeństwa i romanse ikony Hollywood

Ava Gardner była żoną Mickeya Rooneya i Franka Sintry, a także spotykała się z kilkoma innymi gwiazdami Hollywood. Oto spojrzenie wstecz na historię randek Avy Gardner.

2024-06-23.

Kim jest żona Johna Cleese'a? Wszystko o Jennifer Wade

Kim jest żona Johna Cleese'a? Wszystko o Jennifer Wade

John Cleese poślubił swoją żonę Jennifer Wade w 2012 roku. Oto wszystko, co warto wiedzieć o żonie Johna Cleese'a, Jennifer Wade.

2024-06-16.

Posiadłość Kim Zolciak-Biermann i Kroy Biermann List w Gruzji na sprzedaż w Splicie

Posiadłość Kim Zolciak-Biermann i Kroy Biermann List w Gruzji na sprzedaż w Splicie

Gwiazda „Prawdziwych gospodyń domowych z Atlanty” i jej były mąż, zawodowy zawodnik NFL, po raz pierwszy kupili rozległą rezydencję Alpharetta w 2012 roku.

2023-10-17.

zaimki są bardzo przerażające

Uderzyło mnie to nagle, jak to często bywa. Znowu jest w połowie <Nie, nie ten w Pacyfiku, bordowy, ten na karnawale> Każdy nagłówek jest głośny…..

3 sprawdzone sposoby na poprawę umiejętności pisania

Korzyści płynące z pisania i strategie, które Ci w tym pomogą

3 sprawdzone sposoby na poprawę umiejętności pisania

W 2022 roku, wraz z wydaniem GPT-3, umiejętność pisania wydaje się tracić na znaczeniu. Dzięki sztucznej inteligencji osoby o słabym pisaniu mogą również generować wysokiej jakości personel.

Powolna erozja: ujawnianie sposobów, w jakie ludzie marnują swoje kariery

Powolna erozja: ujawnianie sposobów, w jakie ludzie marnują swoje kariery

W dzisiejszym dynamicznym i konkurencyjnym świecie kariera odgrywa znaczącą rolę w rozwoju osobistym, stabilności finansowej i ogólnej satysfakcji z życia. Jednak wiele osób wpada w nieustający cykl stagnacji i niezadowolenia, stopniowo marnując swoje życie zawodowe.

Co wpływa na podcast?

Co wpływa na podcast?

W zeszłym tygodniu zauważyłem komunikat prasowy, wysłany za pośrednictwem PressGazette (brytyjski serwis informacyjny). W artykule ogłoszono, że Acast, skandynawska firma hostingowa i reklamowa podcastów, będzie przewodzić konsorcjum „prawdopodobnie najbardziej wpływowych” wydawców podcastów.

Language

Japanese
Spanish
German
French
Thai
Portuguese
Russian
Vietnamese
Italian
Korean
Turkish
Indonesian
Polish
Hindi