vue引入jquery
在 Vue 项目中引入 jQuery
Vue 项目通常不推荐直接使用 jQuery，因为 Vue 本身已经提供了数据绑定和 DOM 操作的能力。但如果有特殊需求需要引入 jQuery，可以按照以下方法操作。
安装 jQuery
通过 npm 或 yarn 安装 jQuery：
npm install jquery
# 或
yarn add jquery配置 webpack
在 Vue CLI 创建的项目中，默认使用 webpack 作为打包工具。需要在 vue.config.js 中配置 webpack 以全局引入 jQuery。
const webpack = require('webpack');
module.exports = {
configureWebpack: {
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
}),
],
},
};如果没有 vue.config.js 文件，可以在项目根目录下创建该文件并添加上述配置。
在组件中使用 jQuery
在 Vue 组件中，可以直接通过 this.$ 或全局的 $ 访问 jQuery。
export default {
mounted() {
$(this.$el).find('.example').css('color', 'red');
},
};通过 CDN 引入 jQuery
如果不想通过 npm 安装，也可以通过 CDN 引入 jQuery。在 public/index.html 中添加以下代码：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>然后在组件中可以直接使用全局的 $ 或 jQuery。
注意事项
- Vue 和 jQuery 的 DOM 操作方式不同，混合使用可能导致冲突或难以维护的代码。
- 如果只是为了 DOM 操作，建议优先使用 Vue 的指令（如
v-if、v-for）和ref属性。 - 如果必须使用 jQuery，建议将其功能封装为独立的插件或工具函数，避免直接在组件中频繁操作 DOM。
