> 웹 프론트엔드 > 프런트엔드 Q&A > bootstrap과 vue를 함께 사용할 수 있나요?

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

青灯夜游
풀어 주다: 2021-11-10 10:15:20
원래의
11061명이 탐색했습니다.

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

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

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

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

Vue에서 Bootstrap을 사용하는 방법

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

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

1

npm install bootstrap3 -S

로그인 후 복사

여기에서 bootstrap3 버전

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

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

에 부트스트랩을 소개합니다. 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

1

npm install bootstra-vue bootstrap axios

로그인 후 복사

BootstrapVue 및 CSS 소개

2. src/main.js

1

2

3

4

5

6

7

8

9

10

11

12

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 수정:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿