Vue cli3에 부트스트랩을 도입하는 방법 소개

이 글에서는 Vue cli3에 bootstrap을 도입하는 방법을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

관련 권장사항: "vue.js tutorial", "bootstrap tutorial"

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

첫 번째 단계, 설치

1.npm 설치

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

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

최신 버전의 부트스트랩(종속성 없음)을 설치하려면 다음을 사용하세요.

cnpm install bootstrap@3 --save-dev

시각적 창 설치

1. 찾기: 프로젝트 > 종속성 > 종속성 설치

jquery 및 popper.js 검색 및 설치 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.$ = $

3단계, 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']
            })
        ]
    }
}

그런 다음 이를 사용하여

bootstrap

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

For를 테스트할 수 있습니다. 프로그래밍 관련 지식을 더 보려면

프로그래밍 교육

을 방문하세요! !

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