Bootstrap-vue를 사용하여 vue.js와 부트 스트랩을 통합합니다

이 기사는 부트 스트랩 뷰를 사용하여 부트 스트랩을 vue.js와 통합하여 jQuery의 필요성을 제거합니다. React and vue.js는 인기있는 JavaScript 프레임 워크이지만 vue.js는 더 간단한 학습 곡선과 설정을 자랑합니다. 널리 사용되는 HTML/CSS 프레임 워크 인 Bootstrap은 전통적으로 jQuery에 의존합니다. 부트 스트랩-vue는이 간격을 연결합니다.

부트 스트랩 뷰의 주요 장점 :

는 부트 스트랩 구성 요소를 VUE 구성 요소로 사용하여 부트 스트랩 및 vue.js를 결합합니다. NPM을 통해 설치 가능, 프로젝트 스캐 폴딩을위한 vue-cli 템플릿을 제공합니다 는 스크립트 태그를 통해 포함 할 수 있으며, 단순화 설정 는 동적 구성 요소 및 이벤트 처리에 대한 vue.js 지침을 지원합니다 Bootstrap의 배경 : Twitter에서 Mark Otto와 Jacob Thornton이 제작 한 Bootstrap은 모바일 응답 설계, 일반적인 UI 구성 요소 및 광범위한 브라우저 지원으로 인해 빠르게 인기를 얻었습니다. 새로운 웹 프로젝트의 표준이되었습니다 bootstrap 및 vue.js를 연결합니다 jQuery에 대한 Bootstrap의 의존도는 vue.js와의 직접 통합을 복잡하게합니다. Bootstrap-Vue 및 Vuestrap은 솔루션이며 Bootstrap-Vue는보다 최신적이고 인기있는 선택입니다. 부트 스트랩 vue 세부 사항 :

부트 스트랩 뷰는 부트 스트랩 구성 요소, 그리드 시스템 및 vue.js 지침을 지원합니다. 온라인 놀이터는 열렬한 환경과 JSFiddle 수출 기능을 제공합니다. 포괄적 인 문서는 유용성을 더욱 향상시킵니다 명령 줄 설치 (NPM) :

• 이것은
템플릿을 사용하여 새로운 프로젝트를 만듭니다. 부트 스트랩 및 부트 스트랩 벤트 스타일 및 구성 요소를 가져옵니다. . 프론트 엔드 코드가 포함되어 있습니다
스크립트 태그 설치 :
• 또는 html에 스크립트 태그를 통해 부트 스트랩 뷰를 포함 시키십시오 :
• 레거시 브라우저 지원을 고려하십시오
부트 스트랩-vue 구성 요소 작업 :

코드펜을 사용한 예제는 경고 및 목록보기 생성을 보여줍니다

경고 구성 요소 : 이것은 무시할 수있는 경고를 만듭니다. 추가 사용자 정의 옵션은 Bootstrap-Vue 설명서를 참조하십시오

동적 목록 뷰 구성 요소 :

와

와 함께 사용하는 지시문은 동적 목록을 만듭니다.

<code class="language-bash">npm i bootstrap-vue
npm i -g vue-cli
vue init bootstrap-vue/webpack-simple getting-started
cd getting-started
npm install
npm run dev</code>

배지에서의 이벤트 처리 :

구성 요소는 이벤트 리스너와 함께 사용할 수 있습니다 : 이것은 버튼 클릭의 공유 카운터를 증가시킵니다.

결론 : <b-badge></b-badge> Bootstrap-vue는 부트 스트랩을 vue.js 프로젝트에 통합하는 것을 단순화하여 반응 형 및 동적 웹 응용 프로그램을 구축하기위한 강력한 조합을 제공합니다. 제공된 예제와 추가 리소스에 대한 링크를 통해 개발자는 신속하게 시작할 수 있습니다.

<code class="language-html"><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">

</code>

자주 묻는 질문 (faqs) :

FAQS 섹션은 이미 원본 텍스트에서 잘 작성되고 포괄적입니다. 변경이 필요하지 않습니다.

위 내용은 Bootstrap-vue를 사용하여 vue.js와 부트 스트랩을 통합합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!