vue프로젝트에 bootstrap을 도입하셨나요? 다음 기사에서는 이를 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.
권장 관련 튜토리얼: "bootstrap tutorial"
vue 프로젝트에 부트스트랩을 도입하려면 먼저 두 가지 종속성인 jQuery 및 popper를 도입해야 합니다.
설치 명령은 다음과 같습니다.
cnpm install bootstrap --save-dev cnpm install jquery --save-dev cnpm install popper.js --save-dev
최신 버전이 기본적으로 설치됩니다. V3 버전의 부트스트랩을 설치하려면 다음을 수행하세요.
cnpm install bootstrap@3 --save-dev
또는 시각적 창 설치
1. 찾기: 프로젝트> 종속성 > + 종속성 설치 > 종속성 실행
jquery 및 popper.js 검색 및 설치
2. 찾기: 프로젝트 > 종속성 > 개발 종속성 설치
install bootstrap
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.$ = $
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!