在vue中如何引jquer

本文详细介绍了如何在Vue项目中全局引入并使用jQuery,包括在webpack配置文件中添加相关插件,以及在main.js文件中引入jQuery的具体步骤。

最近学习vue,习惯性的通过<script>标签引入jquery,写完后报错才想起来,这种方式在vue是不适用的。

 

1:因为已经安装了vue脚手架,所以需要在webpack中全局引入jquery

      打开package.json文件,在里面加入这行代码,jquery后面的是版本,根据你自己需求更改。    

        dependencies:{

  "jquery":"^2.2.3"

       }

      然后在命令行中cnpm install   

      大多人应该都是使用的淘宝镜像,所以使用cnpm,如果你不是 ,可以使用npm安装。

 

2:在webpack.base.conf.js中加入一行代码

 var webpack=require("webpack")

 

3:在webpack.base.conf.js中module.exports的最后加入这行代码,

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

 

4:在main.js中引入,加入下面这行代码

      import $ from 'jquery'

 

5:最后一步,重新跑一边就好,cnpm run dev   

 

 

以上方法我自己试过了,确认可以正常使用,如果有不对的地方欢迎联系我进行改正。

转载于:https://www.cnblogs.com/RootEvils/p/10284732.html

<think>好的,我需要帮助用户了解如何在HTML文件中正确jQuery库。首先,根据用户提供的用资料,我需要整理出几种常见的方法,并确保每一步都清晰易懂。用户可能不熟悉前端开发,所以需要用简单明了的语言解释。 首先,用[1]提到了本地入的方法,即下载jQuery文件并将其放在项目目录中,然后在HTML的<head>或<body>中使用<script>标签入。需要注意路径是否正确,用户可能会遇到路径错误的问题,所以需要提醒他们检查路径。 然后,用[2]和[3]讨论了在线入,比如使用CDN链接。这对于不需要本地存储文件的用户来说更方便,但需要网络连接。需要列出常用的CDN地址,比如jQuery官方、Google或Microsoft提供的链接,并说明优缺点,比如加载速度和可靠性。 接下来,用[5]强调了入顺序的问题。如果用户先写自己的jQuery代码再入库,会导致代码无法执行。所以必须强调<script>标签的顺序,先入库再写代码,或者使用DOMContentLoaded事件来确保文档加载完成后再执行脚本。 另外,用[4]提到在Vue项目中jQuery可能会遇到ESLint报错的情况,解决方法是在eslint配置中添加jquery: true。虽然用户的问题是关于普通HTML文件,但可能需要简要提及框架中的处理,以备用户有其他需求。 还需要注意常见的错误,比如路径错误、网络问题导致CDN加载失败,以及语法错误。例如,用户可能拼错文件名或忘记将文件放在正确的位置,或者CDN链接失效。可以建议用户通过浏览器开发者工具检查控制台是否有404错误,来排查问题。 最后,生成相关问题,帮助用户进一步学习。比如如何验证jQuery是否成功入,不同入方式的优缺点,以及解决常见错误的方法。这些问题能导用户深入理解和解决实际应用中可能遇到的问题。 总结步骤应该是:本地入方法、CDN入方法、注意事项(顺序、路径、错误处理)、验证是否成功。确保每个步骤都有示例代码,并解释关键点,如路径的正确写法,使用CDN的好处,以及代码顺序的重要性。</think>### 如何在 HTML 文件中jQuery 库 #### 1. **本地入(推荐初学者)** - **步骤**: 1. 从 [jQuery官网](https://jquery.com/) 下载库文件(选择压缩版 `jquery-x.x.x.min.js`)。 2. 将文件保存在项目目录中(例如与 HTML 文件同级或 `js/` 文件夹)。 3. 在 HTML 的 `<head>` 或 `<body>` 中添加 `<script>` 标签入: ```html <!-- 假设文件路径为 js/jquery-3.7.1.min.js --> <script src="js/jquery-3.7.1.min.js"></script> ``` - **注意事项**: - 路径必须与实际文件位置匹配,否则会报错[^5]。 - 入后,所有 jQuery 代码需写在 `<script>` 标签内或外部 JS 文件中[^1]。 #### 2. **在线 CDN 入(无需下载)** - **方法**: ```html <!-- 使用 jQuery 官方 CDN --> <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <!-- 或使用其他公共 CDN(如 Google、Microsoft) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> ``` - **优点**: - 减少本地文件管理,加快首次加载速度(依赖网络)[^2]。 #### 3. **代码顺序与执行时机** - **规则**: - **必须**先jQuery,再编写依赖 jQuery 的代码[^5]。例如: ```html <script src="jquery.js"></script> <script> $(document).ready(function() { console.log("jQuery 已加载!"); }); </script> ``` - 若代码需在页面加载完成后执行,可包裹在 `$(document).ready()` 中。 #### 4. **验证是否入成功** - **简单测试**: ```html <script> if (typeof jQuery === 'undefined') { console.error("jQuery 未正确入!"); } else { console.log("jQuery 版本:" + $.fn.jquery); } </script> ``` #### 5. **常见错误与解决** - **404 错误**:路径错误或文件名拼写错误,需检查开发者工具控制台。 - **语法报错**:确保 jQuery 代码未在入前执行[^5]。 - **框架兼容性**:在 Vue/React 中需通过 `npm` 安装并配置 ESLint[^4]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值