bootstrap과 vue를 함께 사용할 수 있나요?

Bootstrap과 vue를 함께 사용할 수 있습니다. bootstrap을 사용하여 Vue 템플릿을 작성하면 개발 효율성이 향상될 수 있으며 vue는 특히 Vue 및 Bootstrap4를 사용하여 반응형 모바일 우선 웹 사이트를 구축하는 데 사용되는 bootstrap ui 구성 요소 라이브러리를 제공합니다. 편물.

이 튜토리얼의 운영 환경: Windows 7 시스템, vue2.9.6&&bootsrap4 버전, DELL G3 컴퓨터

bootstrap과 vue는 함께 사용할 수 있으며 부트스트랩을 사용하여 템플릿을 작성하면 충돌하지 않습니다. vue의 경우 개발 효율성을 향상시킬 수 있습니다.

Vue에서 Bootstrap을 사용하는 방법

1. 부트스트랩 라이브러리를 설치합니다.

프로젝트의 루트 디렉터리에서

npm install bootstrap3 -S

여기에서 bootstrap3 버전

2을 선택한 다음 main.js 파일

에 부트스트랩을 소개합니다. 3. 템플릿에 Bootstrap에서 제공하는 html 구성 요소 구조를 작성하면 됩니다.

또한 BootstrapVue 프레임워크를 사용할 수도 있습니다.

vue에는 전용 UI 구성 요소 라이브러리 BootstrapVue가 있습니다. 는 Vue.js를 사용하여 웹에서 반응형 모바일 우선 사이트를 구축하기 위해 세계에서 가장 인기 있는 Framework Bootstrap v4를 기반으로 합니다.

BootstrapVue는 Bootstrap v4 + Vue.js를 기반으로 하는 프런트 엔드 UI 프레임워크입니다. Vue.js 프레임워크 자체를 학습하기 위한 입문 프레임워크로는 BootstrapVue가 매우 좋다고 생각합니다. Bootstrap 프레임워크 자체는 가볍고 배우기 쉬우며 많은 타사 플러그인 및 테마 스타일을 통해 전 세계적으로 매우 인기가 있습니다. 진보적인 프레임워크인 Vue.js의 핵심 라이브러리는 시작하기 쉬울 뿐만 아니라 타사 프레임워크 또는 기존 프로젝트와 쉽게 통합할 수 있는 뷰 레이어에만 중점을 둡니다.

1. BootstrapVue

npm install bootstra-vue bootstrap axios

BootstrapVue 및 CSS 소개

2. 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 = true
 
new Vue({
  render: h => h(App),
}).$mount('#app')

3 수정:

<template>
  <b-container fluid class="p-4">
    <b-row>
      <b-col sm="3" v-for="item in list" v-bind:key="item.index">
        <b-img thumbnail fluid :src="item.strCategoryThumb" v-bind="mainProps"></b-img>
      </b-col>
    </b-row>
  </b-container>
</template>
 
<script>
import axios from "axios"
 
export default {
  name: &#39;HelloWorld&#39;,
  data() {
    return {
      mainProps: {
        class: &#39;mb-2&#39;
      },
      list: []
    }
  },
  mounted() {
    axios
        .get("https://www.themealdb.com/api/json/v1/1/categories.php")
        .then(response => {
        this.list = response.data.categories
      })
        .catch(err => {
        console.log(err)
      })
  }
}
</script>

추천 학습: "bootstrap 사용 튜토리얼 》

위 내용은 bootstrap과 vue를 함께 사용할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!