vue.js는 jquery를 지원하나요?

vue.js는 jquery를 지원합니다. vue에서 jquery를 사용하는 방법: 먼저 "npm install jquery --save"를 사용하여 설치한 다음 webpack을 구성하고 main.js에서 jquery를 가져옵니다. 마지막으로 필수 구성 요소에서 jquery 코드를 사용합니다.

이 튜토리얼의 운영 환경: windows10 시스템, vue2.9, 이 기사는 모든 브랜드의 컴퓨터에 적용 가능합니다.

이미 vue-cli를 사용하여 개발 스캐폴딩을 구축했다고 가정하고 다음을 살펴보세요.

1. NPM 설치 jQuery를 프로젝트 루트 디렉터리

npm install jquery --save

2에서 다음 코드를 실행합니다. Webpack 구성

프로젝트 루트 디렉터리 아래의 빌드 디렉터리에서 webpack.base.conf.js 파일을 찾아 다음을 사용합니다. 파일은 기본적으로 참조되지 않기 때문에 webpack을 소개하기 위해 시작 부분에 코드를 추가합니다.

var webpack = require('webpack')

그런 다음 module.exports에 코드 조각을 추가하세요.

// 原有代码resolve: {
 extensions: ['.js', '.vue', '.json'],
 alias: {'vue$': 'vue/dist/vue.esm.js','@': resolve('src')
 }
},// 添加代码plugins: [
 new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
jquery: "jquery","window.jQuery": "jquery"
 })
],// 原有代码module: {
 rules: [// ...... ]
}

그런 다음 많은 다른 솔루션에서는 그냥 main.js로 가져오라고 했지만 질문자는 이를 따랐습니다.

main.js에서 jQuery 가져오기

import 'jquery'

Vue 구성 요소에서 $ 또는 jQuery를 사용하여 dom을 작동하는 코드를 작성하세요

그런 다음 프로젝트를 시작하세요

npm run dev

하지만 컴파일에서 오류가 보고되었습니다.

http://eslint.org/docs/rules/no-undef '$'가 정의되지 않았거나http://eslint.org/docs/rules/no-undef '$' is not defined or
http://eslint.org/docs/rules/no-undef 'jQuery' is not defined
http://eslint.org/docs/rules/no-undef 'jQuery'가 정의되지 않았습니다. code>

무슨 일이에요? ? ?

3.eslint check

똑똑한 친구들은 eslint와 관련이 있다고 생각했을 겁니다. 네, 이때 해야 할 일은 루트 디렉터리에 있는 .eslintrc.js 파일을 수정하는 것입니다. 수정된 파일 내보내기, 키-값 쌍 jquery: true를 env에 추가하기만 하면 됩니다. 즉:

env: { // 原有
 browser: true, // 添加
 jquery: true}

npm dev를 다시 실행하세요. 확인, 오류가 보고되지 않았습니다. 서둘러서 구성 요소인 console.log($에서 시도해 보세요. ('selector')) DOM을 얻기 위해 jQuery를 성공적으로 사용했음을 알 수 있습니다.

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 비디오 코스를 방문하세요! !

위 내용은 vue.js는 jquery를 지원하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!