Vue 프로젝트에 부트스트랩을 도입하는 방법

vue프로젝트에 bootstrap을 도입하셨나요? 다음 기사에서는 이를 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

권장 관련 튜토리얼: "bootstrap tutorial"

vue 프로젝트에 부트스트랩을 도입하려면 먼저 두 가지 종속성인 jQuery 및 popper를 도입해야 합니다.

1단계, 설치

1, npm 설치

설치 명령은 다음과 같습니다.

cnpm install bootstrap --save-dev
cnpm install jquery --save-dev
cnpm install popper.js --save-dev

최신 버전이 기본적으로 설치됩니다. V3 버전의 부트스트랩을 설치하려면 다음을 수행하세요.

cnpm install bootstrap@3 --save-dev

또는 시각적 창 설치

2를 사용하세요. 설치

1. 찾기: 프로젝트> 종속성 > + 종속성 설치 > 종속성 실행
jquery 및 popper.js 검색 및 설치

2. 찾기: 프로젝트 > 종속성 > 개발 종속성 설치
install bootstrap

Step 2. 소개

main.js 페이지에서 다음 코드를 작성합니다

// 引入jQuery、bootstrap
import $ from 'jquery'
import 'bootstrap'

// 引入bootstrap样式
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'

// 全局注册 $
Vue.prototype.$ = $

세 번째 단계는 jQuery를 구성하는 것입니다

vue.config.js에서 다음 코드를 작성합니다(vue가 없는 경우 .config.js, package.json 형제 디렉터리 아래에 수동으로 새 항목 생성)

const webpack = require("webpack")
module.exports = {
    // 配置插件参数
    configureWebpack: {
        plugins: [
            // 配置 jQuery 插件的参数
            new webpack.ProvidePlugin({
                $: 'jquery',
                jQuery: 'jquery',
                'window.jQuery': 'jquery',
                Popper: ['popper.js', 'default']
            })
        ]
    }
}

그런 다음 사용할 수 있습니다

테스트 부트스트랩

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

더 많은 프로그래밍 관련 지식을 보려면 다음을 방문하세요: Programming Teaching ! !

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