>  기사  >  웹 프론트엔드  >  vue-cli가 부트스트랩 도구를 도입하는 방법

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

小云云
小云云원래의
2018-01-09 11:34:021247검색

이 글은 주로 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.