vue引用jquery
在 Vue 项目中引入 jQuery
Vue 是一个现代化的前端框架，而 jQuery 是一个传统的 DOM 操作库。虽然 Vue 本身不推荐直接操作 DOM，但在某些场景下可能需要结合 jQuery 使用。以下是引入 jQuery 的方法。
通过 npm 安装 jQuery
在 Vue 项目中，可以通过 npm 或 yarn 安装 jQuery。
npm install jquery或者使用 yarn：
yarn add jquery配置 webpack 或 vite
对于 webpack 项目
在 vue.config.js 中配置 webpack 的 ProvidePlugin，将 jQuery 全局注入。
const webpack = require('webpack');
module.exports = {
configureWebpack: {
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
})
]
}
};对于 Vite 项目
在 vite.config.js 中通过 rollupOptions 配置全局变量。
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
jquery: 'jquery/dist/jquery.slim.min.js'
}
}
});在组件中使用 jQuery
在 Vue 组件中，可以直接通过 this.$ 或全局变量 $ 访问 jQuery。
export default {
mounted() {
$(this.$el).find('.example').css('color', 'red');
}
};通过 CDN 引入 jQuery
如果不使用 npm，可以在 public/index.html 中通过 CDN 引入 jQuery。
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>然后在组件中声明 $ 或 jQuery 为全局变量。
import { onMounted } from 'vue';
export default {
setup() {
onMounted(() => {
window.$('.example').css('color', 'red');
});
}
};注意事项
- Vue 和 jQuery 的设计理念不同，Vue 通过数据驱动视图，而 jQuery 直接操作 DOM。混合使用可能导致代码难以维护。
- 在 Vue 3 中，推荐使用 Composition API 或原生 JavaScript 替代 jQuery 的功能。
- 如果必须使用 jQuery，尽量将其逻辑封装为独立的插件或工具函数，避免直接操作 Vue 组件的 DOM。
