Vue에서 jQuery를 사용하는 방법에 대한 튜토리얼

本文主要和大家分享Vue 中使用 jQuery的方法教程，编译报错：
$ is undefined or no-undef '$' is not defined
，
假设你已经使用vue-cli搭建好了开发的脚手架，接下来如下：

로그인 후 복사

jQuery를 설치하고, 프로젝트 루트 디렉터리에서 다음 코드를 실행합니다.

npm install jquery --save

webpack 구성

프로젝트 루트 디렉터리의 빌드 디렉터리에서 webpack.base.conf.js 파일을 찾고, 파일이 기본적으로 참조되지 않기 때문에 웹팩을 도입하세요

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로 가져오는 것만으로도 충분하다고 하는데 질문자는 그랬어. jQuery를 main.js로 가져옵니다.

import 'jquery'

Vue 구성 요소에서 $ 또는 jQuery를 사용하여 DOM을 작동하는 코드를 작성합니다. 그런 다음 프로젝트를 시작하세요.

npm run dev

하지만 컴파일 오류가 보고됩니다.

http://eslint.org/docs/rules/no-undef '$' is not defined orhttp://eslint.org/docs/rules/no-undef 'jQuery' is not defined

무슨 일이 일어나고 있나요? ? ?

eslint check

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

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

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

관련 권장 사항:

vue 구성 요소의 세 가지 작성 형식에 대한 자세한 설명

vue에 대한 자세한 설명 vux 코드 추가 방법

Vue 2.5의 TypeScript 개선 사항

위 내용은 Vue에서 jQuery를 사용하는 방법에 대한 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!