vue-cli가 부트스트랩 도구를 도입하는 방법

이 글은 주로 vue-cli가 부트스트랩 도구를 도입하는 방법을 소개합니다. 편집자가 꽤 좋다고 생각해서 지금 공유하고 참고용으로 제공하겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

다음 작업은 노드 환경의 일반적인 설치를 기준으로 합니다.

1. jq 소개:

npm 콘솔에서 프로젝트 디렉터리를 입력한 다음 npm install jquery --save-dev 명령을 입력합니다(npm을 cnpm으로 바꾸는 것이 더 좋으며, cnpm은 다음에서 더 빨리 다운로드됩니다). 국내 환경).

2. 빌드 디렉터리에서 webpack.base.conf.js 구성 파일을 수정합니다.

1) webpack 개체를 추가합니다. var webpack=require('webpack');

2) 모듈에 다음을 추가합니다. .exports 구성:

plugins: [ 

 　　　　new webpack.ProvidePlugin({ 

 　　　　　　$:"jquery", 

　　　　　　 jQuery:"jquery", 

　　　　　　 "windows.jQuery":"jquery" 

　　　　 }) 

　　]

3) 항목 파일 main.js에 추가: import jquery from 'jquery'

3. 부트스트랩 소개:

1) webpack.base.conf.js 파일 수정 :

alias: { 

　　　　 'vue$': 'vue/dist/vue.esm.js', 

　　　　 '@': resolve('src'), 

　　　　 'assets': path.resolve(__dirname, '../src/assets'), 

　　　　 'jquery': "jquery/src/jquery" 

　　 }

2) 항목 파일 main.js 추가:

　　import './assets/css/bootstrap.min.css' 
　　import './assets/js/bootstrap.min'

3) 자산 파일 디렉터리에 다양한 부트스트랩 파일 복사:

관련 권장 사항:

기준 부트스트랩 버튼 드롭다운은 사용자 정의 선택을 생성합니다

부트스트랩 반응형 도구 사용 방법 공유

부트스트랩 테이블 검색 상자 및 쿼리 기능 자세한 설명

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