vue-cli 에서 jQuery,boottstrap 을 참조 하고 sass,less 를 사용 하여 css 를 작성 합 니 다.

앞 에 쓰기:
본 고 는 vue-손 으로 만 져 서 vue-cli 비 계 를 사용 하 라 고 가 르 쳤 습 니 다.-상세 한 절차 그림 을 분석 한 후에 vue-cli 비계 설정 과 관련 된 글 도 있 습 니 다.어떤 글 은 절차 가 뚜렷 하지 않 았 기 때문에 그 당시 에 제 가 JQuery,boottstrap 을 도입 할 때 많은 공 을 들 였 기 때문에 본 글 의 절 차 는 최대한 상세 하 게 할 것 입 니 다.
boottstrap 도입
1.필요 한 boottstrap 파일 을 다운로드 합 니 다.
src 디 렉 터 리 에 있 는 assets 폴 더 에 사용 할 boottstrap 파일 을 넣 습 니 다.
2.입구 파일 src/main.js 에 boottstrap 도입

import './assets/bootstrap-3.3.7-dist/css/bootstrap.min.css'
import './assets/bootstrap-3.3.7-dist/js/bootstrap.min'//             

이렇게 하면 vue 프로젝트 에서 boottstrap 스타일 을 사용 할 수 있 습 니 다.class 에서 직접 사용 하면 됩 니 다.아래 그림 단추 스타일 과 같 습 니 다.

jquery 도입
1.jquery 의존 다운로드.

npm install jquery --save

원래 내 가 다운로드 한 jQuery 의존 패키지 에 경고 가 나 왔 습 니 다.

여기에 버 리 라 는 경고 가 나 왔 다[email protected]"jquery"(전체 소문 자)를 사용 하 십시오.그리고 전 소문 자 jquery 로 바 꿀 게 요.
2.설정 수정
위치:build 폴 더 의 webpack.base.conf.js 파일 입 니 다.
웹 팩 대상 추가:

 var webpack = require("webpack");

위치:build 폴 더 에 있 는 webpack.base.conf.js 파일(원래 위치)을 아래 module.exports 대상 에 추가 합 니 다. 

plugins: [// 3.   

     jquery
   new webpack.ProvidePlugin({
   $: "jquery",
   jQuery: "jquery",
   jquery: "jquery",
   "window.jQuery": "jquery"
 })],

세 번 째 단 계 는 없습니다.이 제 는 구성 요소 에서 jquery 를 직접 사용 할 수 있 습 니 다.다른 위치 에서 jquery 를 인용 하지 않 아 도 됩 니 다.이렇게 가 볍 고 즐 겁 습 니 다.
3.JQ 플러그 인 사용
이 점 에 대해 많은 자 료 를 찾 아 보 았 습 니 다.jq 플러그 인의 사용 방식 을 명확 하 게 설명 하 는 문헌 이 거의 없어 서 vue 를 오랫동안 사용 한 어른 들 도 jq 의 플러그 인 이 vue-cli 에서 직접 사용 할 수 있 는 지 몰 랐 습 니 다.이 단 계 는 간단 하지만 여기 서 말씀 드 리 고 참고 하 겠 습 니 다.
사용 방법:
jq 플러그 인 은 플러그 인 에 필요 한 파일 을 로 컬 src/assets 나 가장 바깥쪽 static 폴 더 에 다운로드 한 다음 플러그 인의 파일 을 구성 요소 에 참조 하여 플러그 인 패 키 징 방법 에 따라 호출 하면 됩 니 다.jq 를 직접 사용 하 는 플러그 인 과 거의 같 습 니 다.
다음은 jq 플러그 인 을 참조 하 는 demo 예제 입 니 다.

css 부분
vue-cli 에 서 는 sas,less 를 사용 하여 css 스타일 을 작성 합 니 다.절차 가 매우 간결 합 니 다.vue-cli 에 서 는 sas,less 가 설정 되 어 있 기 때문에 저 희 는 sas 또는 less 를 사용 하여 두 모듈 을 직접 다운로드 한 다음 에 webpack 은 lang 속성 에 따라 자동 으로 적당 한 로 더 로 처리 합 니 다.
css
직접 손 으로 스타일 을 쓰 면 됩 니 다.css 규칙 을 사용 합 니 다.
외부 css 파일 의 쓰기 참조.

<style lang="css"> 
 @import './index.css' 
 </style> 
    
 <style lang="css" src="./index.css"></style> 

하면,만약,만약...
sas 모듈 설치

npm install node-sass --save-dev 
npm install sass-loader --save-dev

구성 요소 의 style 부분 에 내 연 쓰기 사용 하기

<template></template>
 <script></script>
 <style lang="scss" scoped>//       lang="scss"
 //sass   
 </style> 

sass 외부 파일 의 쓰기 참조.

<style lang="scss" src="./index.scss"></style> 

하면,만약,만약...
less 모듈 설치

npm install less --save-dev 
npm install less-loader --save-dev 

구성 요소 의 style 부분 에 내 연 쓰기 사용 하기 

<template></template>
 <script></script>
 <style lang="less" scoped>//       lang="less" 
 //less   
 </style> 

less 외부 파일 의 쓰기 참조.

<style lang="less" src="./index.less"></style>

결어:
자세히 읽 고 절차 에 따라 기본적으로 성공 을 설정 할 수 있 습 니 다.만약 명확 하 게 쓰 지 못 한 곳 이 있다 면 지적 을 환영 합 니 다.본문 은 소 백 을 향 해 놀 고 있다 고 쓰 여 있 으 니 큰 손 은 가볍게 뿌리 세 요.여러분 의 학습 에 도움 이 되 기 를 바 랍 니 다.여러분 들 도 저 희 를 많이 응원 해 주시 기 바 랍 니 다.