>  기사  >  웹 프론트엔드  >  vue-cli webpack에 jquery를 소개하는 방법(자세한 튜토리얼)

vue-cli webpack에 jquery를 소개하는 방법(자세한 튜토리얼)

亚连
亚连원래의
2018-06-12 16:32:193302검색

vue-cli로 생성된 프로젝트에 jquery를 도입하기 위해 webpack 템플릿을 사용합니다. 먼저 package.json의 종속성에 "jquery": "^2.2.3"을 추가한 후 자세한 내용은 이 문서를 참조하세요.

오늘 오후 내내 열심히 일한 끝에 드디어 vue-cli로 생성한 프로젝트에 jquery를 도입하고 녹음해봤습니다. (템플릿용 webpack)

먼저 package.json의 종속성에 "jquery" : "^2.2.3"을 추가한 다음, install

webpack.base.conf.js의 module.exports에

var webpack = require("webpack")

를 추가하세요. 마지막으로

를 추가하세요.
plugins: [
new webpack.optimize.CommonsChunkPlugin('common.js'),
new webpack.ProvidePlugin({
jQuery: "jquery",
$: "jquery"
})
]

그런 다음 dev를 다시 실행하세요

main.js에 도입해도 괜찮습니다import $ from 'jquery'

jquery를 vue

에 도입하는 방법을 살펴보겠습니다. npm install jquery

npminstall jquery --save

2. build/ webpack.base.conf.js

plugins: [
new webpack.optimize.CommonsChunkPlugin('common.js'),
new webpack.ProvidePlugin({
jQuery:"jquery",
$:"jquery"
 })]

3. jquery

import $ from 'jquery'

4를 main.js에 도입하세요

다음 단계는 module.exports에서 .eslintrc.js 파일을 수정하는 것입니다. 수정된 파일의 키-값 쌍 jquery: true를 env에 추가하면 됩니다. 위의 내용은 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

Webpack에서 파일 변경 사항을 감지하지 못하는 핫 배포 문제 해결

webpack-dev-server에서 자동 페이지 업데이트 구현

jquery 기술을 통해 돋보기 구현

사용 방법 Puppeteer 이미지 인식 기술로 Baidu 인덱스 크롤러 구현

위 내용은 vue-cli webpack에 jquery를 소개하는 방법(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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