jQuery를 사용하시는 경우 아래와 같은 단점을 초래할 수 있습니다.
Note
jQuery 기능은 대부분 트랜지션과 디렉티브를 통해서 구현할 수 있습니다.
https://kr.vuejs.org/v2/guide/custom-directive.html
https://kr.vuejs.org/v2/guide/transitioning-state.html
ajax 관련 기능 필요시 axios를 사용을 권장드립니다.
jQuery 사용이 필요한 경우 아래의 코드를 참고하여 사용할 수 있습니다.
npm i jquery
frontend/build/webpack.common.js 내..
new webpack.ProvidePlugin({
'$': 'jquery',
}),
Vue 샘플..
<template>
<div>
<button @click="slide">Slide Toggle</button>
<ul ref="list">
<li>1</li>
<li>2</li>
</ul>
</div>
</template>
<script>
export default {
name: 'App',
methods: {
slide() {
$(this.$refs.list).slideToggle();
},
}
};
</script>
fronted/.eslintrc 내.. 선언 필요
"globals": {
"M" : "readonly",
"$mcore": "readonly",
"$": "readonly",
"_": "readonly",
"moment": "readonly"
},