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: 'HelloWorld', data() { return { mainProps: { class: 'mb-2' }, 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!