Vue CLI 引入的简单步骤-安装-这样就搞定了 jQuery 插件的使用

作者：机器人技术佬 | 发布时间：2025-06-20 |

第一步，你得把 jQuery 拿进你的 Vue 项目里。你可以用 npm 或者 yarn 来干这个活儿。这俩方法怎么用呢？

使用 npm	使用 yarn
npm install jquery	yarn add jquery

安装完之后，jQuery 就会出现在你的项目目录里，而且会在 package.json 文件里记录下来。

安装好 jQuery 后，你需要在 Vue 项目里把它导入进来。你可以在 main.js 文件里全局导入，也可以在需要用 jQuery 的组件里局部导入。下面是两种方法的例子：

全局导入（main.js）	局部导入（组件中）
import 'jquery'	import $ from 'jquery'

这样就搞定了导入，接下来你就可以在 Vue 组件里用 jQuery 了。

导入 jQuery 后，你就可以在 Vue 组件里用 jQuery 做各种 DOM 操作了。比如，你可以在组件的生命周期钩子里用 jQuery 来控制 DOM 元素：

mounted() {


  $('myButton').click(function() {


    alert('Button clicked!');


  });


}

在这个例子中，我们用 jQuery 给一个按钮绑定了点击事件。

如果你想在 Vue 项目中使用 jQuery 插件，可以按照以下步骤来操作：

这样就搞定了 jQuery 插件的使用。不过要注意，尽管 jQuery 很强大，但在 Vue 项目里最好还是少用，尽量用 Vue 的原生特性和工具，这样能更好地发挥 Vue 的优势。

通过以上四个步骤，我们详细介绍了如何在 Vue CLI 项目中引入 jQuery，包括安装、导入、使用和处理插件。希望这些信息能帮助你顺利地在 Vue 项目中使用 jQuery。不过，建议你尽量使用 Vue 的原生特性和工具，减少对 jQuery 的依赖。