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

php中世界最好的语言
풀어 주다: 2018-06-02 14:26:43
원래의
1856명이 탐색했습니다.

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

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