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

이번에는 vue-cli 프로젝트에서 bootstrap을 사용하는 방법을 보여드리겠습니다. vue-cli 프로젝트에서 bootstrap을 사용할 때 주의사항은 무엇입니까? 다음은 실제 사례입니다.

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

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

Installplug-in

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 중국어 웹사이트의 다른 관련 기사에도 주목해 주세요!

추천 자료:

vue.js 및 element-ui를 사용하여 메뉴 트리 구조를 구현하는 방법

vue에서 .sync 수정자를 사용하는 방법

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