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

이 글은 주로 vue-cli가 bootstrap 도구를 소개하는 방법을 소개합니다. 편집자는 이것이 꽤 좋다고 생각합니다. 이제 js를 여러분과 공유하고 참고용으로 제공하겠습니다. js에 관심이 있으신 분들은 에디터를 팔로우해서 구경해보세요

이 글에서는 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 ) module.exports에 다음 구성을 추가합니다:

plugins: [ 

 　　　　new webpack.ProvidePlugin({ 

 　　　　　　$:"jquery", 

　　　　　　 jQuery:"jquery", 

　　　　　　 "windows.jQuery":"jquery" 

　　　　 }) 

　　]

3) entry filemain.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) 자산 파일 디렉터리에 다양한 부트스트랩 파일 복사:

위 내용은 이 글의 전체 내용입니다. , 도움이 되었기를 바랍니다. 모두의 학습이 도움이 되었으며, 모두가 PHP 중국어 웹사이트를 지원하기를 바랍니다.

관련 권장 사항:

JS 기능 제한 및 흔들림 방지 예제에 대한 자세한 설명

Js에서 모듈화가 구현되는 방법

JS 슬라이딩 로딩 데이터 예제 공유의 간단한 구현

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