Phenquestions
Bootstrap - одна з найпопулярніших у світі фронтенд-фреймворків CSS, яка надає безліч компонентів або шаблони дизайну для створення швидких і швидко реагуючих веб-додатків. Це відкритий і безкоштовний фреймворк для створення сучасних веб-сайтів, збагачених шаблонами HTML і CSS або елементами користувацького інтерфейсу, такими як кнопки, піктограми та форми. У цій публікації ми навчимося спочатку встановлювати, а потім використовувати Bootstrap разом із Vue.js Framework.
Встановлення Bootstrap
Існує бібліотека “bootstrap-vue”, створена спеціально для Vue.js і може використовуватися як компоненти Vue з тими ж функціями, що і Bootstrap. Перед початком роботи з установкою “bootstrap” або “bootstrap-vue”, передбачається, що ви знайомі з HTML, CSS та Javascript, ви налаштували проект Vue і у вас встановлений хороший редактор як код VS. Якщо ви ще не налаштували проект Vue, ви можете дотримуватися наведеної нижче процедури для швидкого налаштування проекту Vue.
Налаштування проекту Vue
Щоб налаштувати проект Vue, спочатку перевірте, чи Vue.js встановлено у вашій системі чи ні, ввівши команду, подану нижче:
Якщо ви ще не встановили його, введіть команду, наведену нижче, щоб встановити Vue.js глобально у вашій операційній системі:
$ npm встановити -g @ vue / cli
Після успішної установки Vue.js глобально в операційній системі, створіть проект Vue, набравши команду “vue create”, подану нижче, а потім назву проекту:
$ vue створити vue-project-name
Він попросить вас вибрати пресет або вибрати власний пресет для проекту Vue.
Після налаштування або вибору пресету за замовчуванням, проект Vue буде створений через деякий час.
Після створення проекту Vue перейдіть до каталогу створеного проекту за допомогою команди “cd”.
$ cd vueprojectname
На цьому етапі ви успішно створили проект Vue.
Встановіть Bootstrap
Після того, як ваша система буде готова, і проект Vue налаштовано! Ви можете встановити “bootstrap-vue”, використовуючи пряжу або NPM. Якщо ви хочете встановити простий “bootstrap” для цілей стилізації, ви можете ввести команду, наведену нижче, щоб встановити їх.
Для встановлення 'bootstrap-vue' та 'bootstrap' за допомогою менеджера пакунків Yarn введіть команду, наведену нижче:
$ yarn додати bootstrap bootstrap-vueАБО
Для встановлення 'bootstrap-vue' та 'bootstrap' за допомогою менеджера пакунків NPM введіть команду, наведену нижче:
$ npm встановити bootstrap bootstrap-vue --save
Гаразд! Після встановлення 'bootstrap' та 'bootstrap-vue' їх потрібно ввімкнути в основному.js.
імпортуйте BootstrapVue з 'bootstrap-vue / dist / bootstrap-vue.esm ';імпортувати 'bootstrap-vue / dist / bootstrap-vue.css ';
імпортувати 'bootstrap / dist / css / bootstrap.css ';
Vue.використання (BootstrapVue);
Увімкнувши “bootstrap” і “bootstrap-vue”, тепер ви можете використовувати їх у своєму проекті Vue.
Як використовувати Bootstrap у Vue
Щоб використовувати Bootstrap з Vue, 'bootstrap-vue' надає різні компоненти, які можна використовувати як Vue-компонент. Наприклад, кнопку можна створити за допомогою "bootstrap-vue", як це.
Щоб дізнатися про подальші компоненти, сміливо відвідайте офіційну сторінку документації BootstrapVue.
Ось так просто встановити та почати використовувати bootstrap у проекті Vue.
Висновок
Bootstrap - це розповсюджена інтерфейсна бібліотека CSS, яка використовується для створення мобільних та адаптивних веб-програм, і за допомогою BootstrapVue ми можемо створювати такі веб-програми за допомогою Vue. У цій публікації ми розглянемо встановлення BootstrapVue у Vue.js, а також подивіться, як його ввімкнути та використовувати. Завдяки поєднанню таких двох надійних бібліотек ми можемо пришвидшити процес розробки та покращити наш веб-додаток до найвищих меж.
