要在Vue項目中使用jQuery，需要使用Vue CLI進行引用。

npm install jquery --save-dev

這會安裝jQuery并將其添加到您的package.json中。然后，在您的Vue.js組件中，您可以使用以下命令來引用jQuery:

import $ from 'jquery'

這將允許您在組件中使用jQuery的函數。但是，要在Vue CLI中正確配置jQuery，還需要進行更多工作。

在主Vue.js文件中，您需要將jQuery添加到Vue的全局命名空間中。在以下示例中，我們將全局變量$添加到Vue:

import Vue from 'vue'
import $ from 'jquery'
Vue.prototype.$ = $

這允許我們在組件中使用$（jQuery）的任何函數，例如：

export default {
mounted () {
$(this.$el).fadeOut()
}
}

然而，代碼仍然不起作用。此時，您可能會發現$不在全局范圍內，具體表現為$ is not defined錯誤。要解決這個問題，請將以下內容添加到webpack配置文件中：

const webpack = require('webpack')
module.exports = {
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
})
]
}

現在，Vue CLI將自動為每個模塊注入$和jQuery值，這意味著您可以在組件中使用這些值而不必每次都導入代碼。這是通過ProivedPlugin插件完成的。

當您需要使用jQuery插件時，您需要在Vue.js組件中安裝它。

import 'some-jquery-plugin'

安裝jQuery插件后，您可以將其用作Vue.js組件的一部分。以下代碼在Vue.js組件中使用DataTable插件：

import 'datatables.net'
import 'datatables.net-dt/css/jquery.dataTables.css'
import $ from 'jquery'
export default {
data () {
return {
dataTableOptions: {}
}
},
mounted () {
this.dataTableOptions = {
ajax: 'http://localhost:8080/data',
columns: [
{ data: 'name' },
{ data: 'email' },
{ data: 'phone' }
]
}
$(this.$refs.table).DataTable(this.dataTableOptions)
}
}

通過使用Vue CLI，您可以使用簡單的方法在Vue.js項目中引用和使用jQuery和jQuery插件。但是，盡管Vue和jQuery可以在同一項目中工作，但過量使用jQuery可能會導致代碼混亂。因此，請小心地考慮是否需要使用jQuery。