Jak używać bootstrap z vue.JS

Bootstrap to jedna z najpopularniejszych na świecie front-end CSS Frameworks, która zapewnia wiele komponentów lub szablonów projektowych do tworzenia szybkich i szybkich responsywnych aplikacji internetowych. Jest to ramy typu open source i bezpłatnie do budowania nowoczesnych stron internetowych wzbogaconych w szablony HTML i CSS lub elementy interfejsu użytkownika, takie jak przyciski, ikony i formularze. W tym poście nauczymy się najpierw zainstalować, a następnie użyć Bootstrap z Vue.JS Framework.

Instalacja bootstrap

Istnieje biblioteka „bootstrap-wue” zbudowana specjalnie dla Vue.JS i mogą być używane jako komponenty vue o tych samych funkcjach co bootstrap. Przed rozpoczęciem instalacji „Bootstrap” lub „Bootstrap-Vue” zakłada się, że znasz HTML, CSS i JavaScript, skonfigurowałeś projekt Vue i masz dobry edytor zainstalowany w systemie Jak kod vs. Jeśli nie skonfigurowałeś jeszcze projektu vue, możesz postępować zgodnie z poniższą procedurą, aby szybko skonfigurować projekt vue.

Projekt konfiguracji Vue

Aby skonfigurować projekt Vue, najpierw sprawdź, czy Vue.JS jest instalowany w twoim systemie lub nie, wpisując polecenie podane poniżej:

$ vue --version

Jeśli jeszcze go nie zainstalowałeś, wpisz podane poniżej polecenie, aby zainstalować vue.JS na całym świecie w twoim systemie operacyjnym:

$ npm install -g @vue/cli

Po pomyślnym zainstalowaniu Vue.JS na całym świecie w systemie operacyjnym, utwórz projekt Vue, wpisując polecenie „Vue Utwórz” podane poniżej, a następnie nazwa projektu:

$ vue Utwórz Vue-Project-Nazwa

Poprosi Cię o wybranie ustawień wstępnych lub wybranie własnego niestandardowego ustawienia dla projektu Vue.

Po skonfigurowaniu lub wybraniu domyślnego ustawienia, projekt Vue zostanie utworzony za chwilę.

Po utworzeniu projektu Vue przejdź do nowo utworzonego katalogu projektu za pomocą polecenia „CD”.

$ cd vueProjectName

Na tym etapie pomyślnie założyłeś projekt Vue.

Zainstaluj bootstrap

Po przygotowaniu systemu i konfiguracji projektu vue! Możesz zainstalować „ładowanie bootstrap” za pomocą przędzy lub NPM. Jeśli chcesz zainstalować prosty „bootstrap” do celów stylizacji, możesz wpisać polecenie podane poniżej, aby je zainstalować.

Do instalacji „Bootstrap-Vue” i „Bootstrap” za pomocą Menedżera pakietu Pakietu przędzy wpisz polecenie podane poniżej:

$ przędza dodaj bootstrap-bootstrap-vue

LUB

Do instalacji „Bootstrap-Vue” i „Bootstrap” za pomocą menedżera pakietów NPM, wpisz polecenie podane poniżej:

$ npm instalacja ładowania bootstrap-vue-Save

W porządku! Po zainstalowaniu „bootstrap” i „bootstrap-vue”, musisz je włączyć w głównym.plik JS.

importować bootstrapvue z „bootstrap-vue/dist/bootstrap-vue.esm ';
importować „bootstrap-vue/dist/bootstrap-vue.CSS ';
Importuj Bootstrap/Dist/CSS/Bootstrap.CSS ';
Vue.używać (bootstrapvue);

Po włączeniu „bootstrap” i „bootstrap-vue”, możesz teraz użyć ich w swoim projekcie vue.

Jak używać bootstrap w vue

Aby użyć bootstrap z vue, „bootstrap-vue” zapewnia różne komponenty do użycia jako komponent vue. Na przykład przycisk można utworzyć za pomocą „bootstrap-vue”.

Przycisk

Aby wiedzieć o dalszych komponentach, odwiedź oficjalną stronę dokumentacji Bootstrapvue.

Tak proste jest zainstalowanie i rozpoczęcie używania bootstrap w projekcie vue.

Wniosek

Bootstrap to powszechna biblioteka Front-end CSS używana do budowania mobilnych aplikacji internetowych i responsywnych, a przy pomocy BootstrapVue możemy budować takie aplikacje internetowe za pomocą Vue. W tym poście przechodzimy przez instalację bootstrapvue w vue.Projekt JS, a także zobaczyć, jak go włączyć i użyć. Dzięki połączeniu takich dwóch solidnych bibliotek możemy przyspieszyć proces tworzenia i upiększyć naszą aplikację internetową do najwyższych granic.