vue安装jquery和配置(不需要在页面引入直接可以使用)

本文详细介绍如何将jQuery集成到Webpack项目中,包括安装jQuery、修改webpack配置文件以及如何确保正确加载和使用jQuery,最后强调配置完成后重启开发服务器的重要性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 


注意:在每次新安装插件的时候在配置完成之后都需要重新npm run dev来更新一下配置,(这一步非常重要,能避免很多麻烦!!!)

 

首先在命令行工具上输入 npm install jquery --save-dev

安装完成之后在build文件夹下的webpack.base.conf.js进行配置,在顶部添加:const webpack = require('webpack')

然后在module.exports = {  }里面加入

plugins: [
  new webpack.optimize.CommonsChunkPlugin('common.js'),
  new webpack.ProvidePlugin({
    jQuery: "jquery",
    $: "jquery"
  })
],

 

这样就可以直接在页面上使用jq了,并且不需要引入就可以直接使用。

 

注意:在每次新安装插件的时候在配置完成之后都需要重新npm run dev来更新一下配置,(这一步非常重要,能避免很多麻烦!!!)

转载于:https://www.cnblogs.com/hermit-gyqy/p/10764247.html

### 如何在 Vue 项目中正确引入 jQuery使用 `$` 符号 要在 Vue 项目中正确引入使用 jQuery `$` 符号,可以按照以下方法操作: #### 方法一:全局引入 jQuery 可以通过 `script` 标签的方式将 jQuery 引入到 HTML 文件中。这种方式简单易用,适合小型项目。 ```html <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> ``` 这样可以直接在浏览器环境中使用 `$` 或 `jQuery`[^2]。 #### 方法二:通过 npm 安装 jQuery 对于更复杂的项目,推荐通过 npm 安装 jQuery,并将其配置为全局变量或局部模块导入。 1. **安装 jQuery** 使用命令行工具运行以下命令来安装 jQuery: ```bash npm install jquery --save ``` 2. **配置 Webpack 加载 jQuery** 如果使用的是基于 WebpackVue CLI 构建环境,则需要修改 Webpack 配置文件以支持 jQuery 的加载。可以在项目的入口文件(通常是 `main.js`)中引入 jQuery: ```javascript import $ from 'jquery'; window.$ = window.jQuery = $; ``` 这样就可以在整个应用中访问 `$` `jQuery`[^4]。 3. **解决 ESLint 报错问题** 当使用 ESLint 检查代码时,可能会遇到 `'jQuery' is not defined` 类型的报错。为了消除这些警告,可以在 `.eslintrc.js` 中声明全局变量: ```javascript module.exports = { globals: { $: true, jQuery: true } }; ``` 此外,也可以在单个文件顶部添加注释忽略未定义的变量: ```javascript /* global $ */ ``` 4. **验证 jQuery 是否正常工作** 可以尝试执行简单的 DOM 操作测试 jQuery 功能是否生效。例如,在组件的方法中编写如下代码: ```javascript mounted() { $('body').append('<p>Test paragraph</p>'); } ``` 如果一切设置无误,上述代码将在页面上追加一段文字[^3]。 --- ### 注意事项 确保在 Vue 组件内部调用 jQuery 函数时会干扰 Vue 自身的数据绑定机制。通常建议仅用于初始化阶段的操作或者处理复杂第三方库集成场景下的交互逻辑。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值