vue-cli 프로젝트에서 부트스트랩을 사용하는 방법

이번에는 vue-cli 프로젝트에서 부트스트랩을 어떻게 사용하는지 보여드리고, vue-cli 프로젝트에서 부트스트랩을 사용할 때 주의사항은 무엇인지 살펴보겠습니다.

HTML 페이지에 부트스트랩을 추가하는 것은 매우 편리합니다. 링크 및 스크립트 태그를 통해 CSS 및 js 파일을 전달하기만 하면 됩니다.

그럼 vue-vli로 생성된 프런트엔드 프로젝트에 어떻게 추가하나요? 프레임워크가 다르기 때문에 익숙해지는 데 시간이 걸립니다.

플러그인 설치

npm install jquery --save
npm install bootstrap --save
npm install popper.js --save

webpack.base.conf.js

//在顶部添加
const webpack = require('webpack')

//在module.exports = {}末尾添加下面代码
module.exports = {
...
plugins: [
  new webpack.ProvidePlugin({
   $: "jquery",
   jQuery: "jquery"
  })
 ]
}

main.js 구성

import $ from 'jquery'
import 'bootstrap'

Test jquery

//在vue文件中添加测试代码
<script>
$(function () {
 alert('234')
})
export default {
 name: 'App'
}
</script>

Test bootstrap

<template>
<p class="container">
  <p class="row">
    <p class="col-md-6">
      <button class="btn btn-primary">测试按钮</button>
    </p>
  </p>
</p>
</template>

에서 사례를 읽으신 후 방법을 마스터하신 것 같습니다. 이 기사가 더 흥미진진합니다. PHP 중국어 웹사이트의 다른 관련 기사도 주목해주세요!

추천 도서:

실제 프로젝트에서 jquerylayur 팝업 레이어 사용 방법

express + mock 프론트 및 백엔드 병렬 개발 운영 방법

위 내용은 vue-cli 프로젝트에서 부트스트랩을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!