[Vue.js] Vue CLI 4 에서 jquery, jquery-ui 사용하기 / error '$' is not defined no-undef error 해결

2021.01.12 작성

jquery 추가

1. jquery node module 추가
   npm install jquery
   
   
2. main.js 에 아래 코드추가

import jQuery from 'jquery'

const app = createApp(App)
...
global.$ = jQuery

 

여기서 global 을 정의해도 ESlint 때문에 아래와 같은 에러가 생길 수도 있다.

error '$' is not defined no-undef

* 원인 : ESlint의 'no-undef' 룰에 의해서 생기는 에러, 변수가 scope 안에 정의되어 있지 않거나 알려진 global(known global) 이 아닐 경우 에러가 생긴다. 

* 해결 : eslint config에 global 옵션 추가

"eslintConfig": {
    "globals": {
        "todoEventBus": "readable"
    }
}

 

---

jquery-ui 추가

 

1. jquery-ui node module 추가
   npm install jquery-ui
   
   
2. main.js 에 아래 코드 추가
   - 필요한 jquery-ui 모듈을 추가
   - draggable() 기능이 필요해 아래와 같이 추가함

...
import 'jquery-ui/ui/widgets/draggable'

const app = createApp(App)
...