Vue筆記——Vue元件中引入jQuery
阿新 • • 發佈:2018-12-14
如果想在普通的HTML頁面引入jQuer庫的話,直接使用
<script src="jQuery.js"></script>
即可。但是如果要在Vue元件中使用jQuery庫的話,使用這樣的方式就不行了,需要使用以下方法
一、安裝jQuery依賴
在使用jQuery之前,我們首先要通過以下命令來安裝jQuery依賴:
npm install jquery --save
# 如果你更換了淘寶映象,可以使用cnpm來安裝,速度更快
cnpm install jquery --save
二、修改配置檔案
完成安裝jQuery依賴之後,我們要修改 webpack.base.conf
首先新增一行程式碼,引入webpack,如下圖所示:
其次是在下圖的位置,新增程式碼配置jQuery外掛:
三、在元件中引入jquery,進行使用
我們想在哪個元件中使用jQuery庫,首先要使用如下命令引入jquery,然後就可以正常使用了
import $ from 'jquery'
比如我們要在 App.vue元件中使用jQuery,例項程式碼如下:
<template>
<div id= "app">
</div>
</template>
<script>
import $ from 'jquery'
export default {
name: 'App',
components: {},
data: function () {
return {}
},
created:function(){
console.log($('#app'));
}
}
</script>
<style>
</style>