Быстро начать работу с BootstrapVue

Vue.js

Перевод: сумасшедший технический ботаник оригинал:blog.log Rocket.com/getting - это он...

img

Vue.js— популярная библиотека JavaScript для быстрой разработки прототипов. Сюда входят пользовательские интерфейсы, интерфейсные приложения, статические веб-страницы и собственные мобильные приложения. Он известен своим простым в использовании синтаксисом и простыми возможностями привязки данных.

Недавно был выпущен новый пакет для экосистемы Vue.js. это популярноЗагрузочная средаИнтеграция с Vue.js. Этот пакет называетсяBootstrapVue. Это позволяет нам использовать пользовательские компоненты, интегрированные с Bootstrap (v4). Он также поддерживает пользовательские компоненты Bootstrap, систему сетки, а также поддерживает директивы Vue.js.

В этой статье мы рассмотрим основы BootstrapVue, объясним общие концепции, продемонстрируем процесс установки и создадим на его основе мини-проект Vue.js, чтобы дать вам больше практического опыта.

Почему BootstrapVue?

Учитывая, что бутстрапсамый популярныйАвтономный фреймворк CSS (на мой взгляд), многие разработчики, которые имеют или намереваются перейти с фреймворка Vanilla JavaScript на Vue.js, всегда находят миграцию немного сложной, потому чтоBootstrap сильно зависит от jQuery.

С BootstrapVue любой может переключиться с Vanilla.js или jQuery на Vue.js, не беспокоясь о сильной зависимости Bootstrap от jQuery или даже о том, как это обойти. Вот как BootstrapVue приходит на помощь. Это помогает восполнить этот пробел и позволяет разработчикам Vue легко использовать Bootstrap в своих проектах.

начиная

При использовании пакетов модулей, таких как webpack, babel и т. д., лучше всего включать эти пакеты непосредственно в проект. Чтобы продемонстрировать и дать вам практический подход к пониманию и использованию BootstrapVue, мы настроим проект Vue.js с BootstrapVue и встроим его в функциональное приложение Vue.js.

предпосылки

  • Базовые знания Vue.js помогут вам понять эту демонстрацию.
  • Установите Vue CLI глобально на свой компьютер. Если вы еще не установили его, пожалуйста, установите его здесьгиддействовать

Create a Vue project

Создание проекта Vue

Сначала мы должны создать проект Vue.js, который мы будем использовать для демонстрации реализации компонентов BootstrapVue. Откройте окно терминала в предпочитаемом вами каталоге и выполните следующие команды:

vue create bootstrapvue-demo

Если у вас не установлен Vue CLI глобально, выполните следующие действия, чтобы установитьгидСделайте это, прежде чем продолжить этот урок.

Приведенная выше команда отобразит диалоговое окно выбора предустановки следующим образом:

img

Выберите по умолчанию и нажмитеEnterПродолжать:

img

Теперь, когда вы создали программу Vue, перейдите в новый каталог проекта Vue и запустите сервер разработки с помощью следующей команды:

cd bootstrapvue-demo
npm run serve

Ваше приложение Vue будет обслуживаться на локальном хосте: 8080. Откройте его в своем браузере, и вы увидите свое приложение Vue:

img

Добавьте Bootstrap и BootstrapVue в проект

Есть два способа сделать это: либо с помощью менеджеров пакетов, таких как npm и yarn, либо с помощью ссылок CDN.

использовать npm или пряжу

Мы установим ранее упомянутые пакеты, используя npm или yarn. Перейдите в корневой каталог вашего проекта и выполните одну из приведенных ниже команд, в зависимости от предпочитаемого менеджера пакетов:

# With npm
npm install bootstrap-vue bootstrap axios

# With yarn
yarn add bootstrap-vue bootstrap axios

Приведенная выше команда установит пакеты BootstrapVue и Bootstrap**. ** Все компоненты BootstrapVue включены в пакет BoostrapVue, обычный Bootstrap включает файлы CSS. Также установленоAxiosпомочь нам отthemealdb APIПолучите данные, необходимые программе.

Using CDN

**Используя CDN**

Чтобы добавить Bootstrap и BootstrapVue в проект Vue через CDN, откройте файл index.html в общей папке проекта и добавьте этот код в соответствующее место:


<!-- public/index.html-->

<!-- Add Bootstrap and Bootstrap-Vue CSS to the <head> section -->
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css"/>

<!-- Add Vue and BootstrapVue scripts just before the closing </body> tag -->
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>

Это добавит минимизированную и последнюю версию каждой библиотеки в наш проект, очень просто! Но для целей этой статьи мы будем использовать менеджер пакетов из первого способа. Продолжим настройку пакета BootstrapVue.

Настройка BootstrapVue

Далее давайте настроим только что установленный пакет BootstrapVue. Перейдите к файлу main.js и добавьте эту строку кода вверху:

//src/main.js
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue)

То, что мы делаем здесь, очень просто: мы импортируем пакет BoostrapVue, а затем используемVue.use()Функция регистрирует его в программе, чтобы программа Vue могла его распознать.

Нам также нужно импортировать CSS-файл Bootstrap в проект. Добавьте этот фрагмент в файл main.js:

//src/main.js
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

После импорта необходимых модулей в вашу программу Vue ваш файл main.js должен выглядеть следующим образом:


//src/main.js
import Vue from 'vue'
import App from './App.vue'
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

Создание компонентов Bootstrap

Давайте начнем создавать наш первый компонент, первый компонент — это компонент Navbar**. ** Перейдите в каталог компонентов и создайте файл с именемNavbar.vueфайл и обновите его следующим кодом:

//src/components/Navbar.vue
<template>
    <div>
      <b-navbar toggleable="lg" type="dark" variant="success">
        <b-container>
            <b-navbar-brand href="#">Mealzers</b-navbar-brand>
            <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
            <b-collapse id="nav-collapse" is-nav>
              <!-- Right aligned nav items -->
              <b-navbar-nav class="ml-auto">
                <b-nav-form>
                  <b-form-input 
                    size="sm" 
                    class="mr-sm-2" 
                    placeholder="Search for a meal"
                    v-model="meal"
                    ></b-form-input>
                  <b-button 
                    size="sm" 
                    class="my-2 my-sm-0" 
                    type="submit" 
                    @click.prevent="getMeal"
                    >Search</b-button>
                </b-nav-form>
                <b-nav-item-dropdown right>
                  <!-- Using 'button-content' slot -->
                  <template slot="button-content"><em>User</em></template>
                  <b-dropdown-item href="#">Profile</b-dropdown-item>
                  <b-dropdown-item href="#">Sign Out</b-dropdown-item>
                </b-nav-item-dropdown>
              </b-navbar-nav>
            </b-collapse>
          </b-container>
      </b-navbar>
    </div>  
</template>
<script>
export default {
    data() {
        return {
            meal: ''
        }
    },
  methods: {
    getMeal() {
      ...
    }
  }
}    
</script>

Компонент Navbar содержит несколько компонентов BootstrapVue, один из которыхb-navbarкомпоненты. Это родительский компонент других компонентов на панели навигации. Без этого компонента все остальные компоненты на панели навигации не будут отображаться правильно.

Можно использоватьtypeдля изменения цвета текста на панели навигации. Навбарbackground-colorтакже можно использоватьvariantсвойства изменить. Эти цвета могут быть любыми из обычных цветов Bootstrap по умолчанию.info,primary,successЖдать.

другойb-navbar-brandкомпонент**. **Здесь может быть представлен логотип веб-сайта. он также содержитvariantа такжеtypeсвойства, которые можно использовать для измененияbackground-colorа такжеtext-color.

Другие компоненты BootstrapVue:

  • b-nav-form
  • b-nav-item-dropdown
  • b-dropdown-item
  • b-navbar-toggle
  • b-collapse
  • b-nav-item (можно отключить атрибутом «disabled»)
  • b-navbar-nav
  • b-nav-item.
  • Более

Одна из прелестей компонентов BootstrapVue заключается в том, что они адаптивны по умолчанию. Так что вам не нужно писать дополнительный код или использовать внешние библиотеки, чтобы сделать его реактивным.

Другим компонентом являетсяCardкомпоненты. Компонент карты позволяет нам отображать изображения, текст и т. д. на карте. это написано какb-card**.Чтобы продемонстрировать это, давайте создадимCards.vueдокумент. **Затем обновите его содержимое с помощью следующего кода:

//src/components/Cards.vue
<template>
  <b-container>
    <div v-if="meals.length">
      <b-row>
        <div v-bind:key="data.index" v-for="data in meals">
          <b-col l="4">
            <b-card
                    v-bind:title="data.strCategory"
                    v-bind:img-src="data.strCategoryThumb"
                    img-alt="Image"
                    img-top
                    tag="article"
                    style="max-width: 20rem;"
                    class="mb-2">
              <b-card-text>{{ `${data.strCategoryDescription.slice(0,100)}...` }}</b-card-text>
              <b-button href="#" variant="primary">View food</b-button>
            </b-card>
          </b-col>
        </div>
      </b-row>
    </div>
    <div v-else>
      <h5>No meals available yet 😢</h5>
    </div>
  </b-container>
</template>

<script>
  import axios from "axios";
  export default {
    data() {
      return {
        meals: []
      };
    },
    mounted() {
      axios
        .get("https://www.themealdb.com/api/json/v1/1/categories.php")
        .then(response => {
        this.meals = response.data.categories;
      })
        .catch(err => {
        console.log(err);
      });
    }
  };
</script>

Чтобы отобразить только что созданный компонент Cards, вам нужно изменитьHelloWorld.vueдокумент. Откройте его и обновите с помощью следующего кода:


//src/components/HelloWorld.vue
<template>
  <div>
    <Cards />
  </div>
</template>

<script>
import Cards from './Cards.vue'
export default {
  name:'cards',
  components: {
    Cards
  },
  data() {
    return {
      
    };
  },
};
</script>
<style scoped>
</style>
view raw

Здесь нужно создать компонент Cards и встроить его вHelloWorld.vue** в файле. **Обратите внимание, что в компоненте «Карты» есть хук жизненного цикла для изменения данных. Данные заносятся вb-cardв компоненте.

Далее обновитеApp.vueфайл, чтобы зафиксировать последние изменения и отобразить правильные компоненты в браузере. Откройте его и обновите с помощью кода ниже:

//App.vue
<template>
  <div id="app">
    <Navbar />
    <HelloWorld/>
  </div>
</template>
<script>
 import HelloWorld from './components/HelloWorld.vue'
  import Navbar from './components/Navbar.vue';  
  export default {
    name: 'navbar',
    components: {
      Navbar,
      HelloWorld
    }
  }
</script>

В браузере вы можете увидеть нашу программу общественного питания, работающую следующим образом:

img

Как видите, карта раскладывается неправильно, это надо исправлять. К счастью, в BootstrapVue есть несколько встроенных компонентов, которые могут размещать наши карты в сетке.

Они есть:

  • b-row
  • b-col

ИсправлятьCards.vueКод в файле, который отображает содержимое в сетке с помощью упомянутого выше компонента BootstrapVue. ОткрытьCards.vueфайл и обновите его следующим фрагментом кода:

//src/components/HelloWorld.vue
<template>
  <b-container>
    <div v-if="meals.length">
      <b-row>
        <div v-bind:key="data.index" v-for="data in meals">
          <b-col l="4">
            <b-card
              v-bind:title="data.strCategory"
              v-bind:img-src="data.strCategoryThumb"
              img-alt="Image"
              img-top
              tag="article"
              style="max-width: 20rem;"
              class="mb-2">
              <b-card-text>{{ `${data.strCategoryDescription.slice(0,100)}...` }}</b-card-text>
              <b-button href="#" variant="primary">View food</b-button>
            </b-card>
          </b-col>
        </div>
      </b-row>
    </div>
    <div v-else>
      <h5>No meals available yet 😢</h5>
    </div>
  </b-container>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      meals: []
    };
  },
  mounted() {
    axios
      .get("https://www.themealdb.com/api/json/v1/1/categories.php")
      .then(response => {
        this.meals = response.data.categories;
      })
      .catch(err => {
        console.log(err);
      });
  }
};
</script>

Теперь обновите свой браузер, и вы должны увидеть правильно расположенную карту с визуализированным содержимым.

img

Теперь есть четко выстроенная программа питания. Мы построили все это с помощью некоторых компонентов BootstrapVue. Чтобы узнать больше о BootstrapVue, ознакомьтесь с официальной документацией (bootstrap-v UE находится по адресу .org/docs/).

мигрировать

Что делать, если вы хотите перенести существующий проект с обычного Bootstrap4 на BootstrapVue? Это будет легко. Вот что вам нужно сделать:

  1. удалить из скрипта сборкиbootstrap.jsдокумент
  2. удалить из своей программыjQuery, BootstrapVue может работать независимо
  3. Преобразование собственной разметки Bootstrap в разметку пользовательского компонента BootstrapVue

Это оно! С помощью этих трех шагов вы можете перенести свои существующие проекты из обычного Bootstrap, основанного на jQuery, в более простой автономный пакет BootstrapVue, не нарушая существующий код.

В заключение

В этой статье показано, как использовать BootstrapVue с примерами. Мы начинаем с установки, настраиваем ее в проекте Vue и, наконец, собираем часть программы Mealzers с ее пользовательскими компонентами. Как видите, модуль BootstrapVue прост и удобен в использовании. Использование BootstrapVue не составит труда, если вы знакомы с обычными пакетами Bootstrap.

Добро пожаловать в общедоступную учетную запись внешнего интерфейса: пионер внешнего интерфейса, получайте больше галантереи внешнего интерфейса.

Категории