> 웹 프론트엔드 > JS 튜토리얼 > vue-cli가 부트스트랩 도구를 도입하는 방법

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

韦小宝
풀어 주다: 2018-01-11 10:12:44
원래의
2118명이 탐색했습니다.

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

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿