如果想在普通的 html 页面引入 jQuer 库的话, 直接使用 < script src="jQuery.js"></script > 即可. 但是如果要在 vue 组件中使用 jQuery 库的话, 使用这样的方式就不行了, 那么怎样在 vue 中使用 jQuery? 下面给大家介绍一下.
一, 安装 jQuery 依赖
在使用 jQuery 之前, 我们首先要通过以下命令来安装 jQuery 依赖:
- NPM install jQuery --save
- # 如果你更换了淘宝镜像, 可以使用 cnpm 来安装, 速度更快
- cnpm install jQuery --save
二, 修改配置文件
完成安装 jQuery 依赖之后, 我们要修改 webpack.base.conf 文件配置文件. 注意我现在的 Vue 版本是 2.9, 如果你使用的是 Vue3.x 版本的话, 这个配置文件的位置可能不一样, 需要你在项目中找一下.
首先添加一行代码, 引入 webpack, 如下图所示:
其次是在下图的位置, 添加代码配置 jQuery 插件:
三, 在组件中引入 jQuery, 进行使用
我们想在哪个组件中使用 jQuery 库, 首先要使用如下命令引入 jQuery, 然后就可以正常使用了
import $ from 'jquery'
比如我们要在 App.vue 组件中使用 jQuery, 实例代码如下:
- <template>
- <div id="app">
- </div>
- </template>
- <script>
- import $ from 'jquery'
- export default {
- name: 'App',
- components: {},
- data: function () {
- return {}
- },
- created:function(){
- console.log($('#app'));
- }
- }
- </script>
- <style>
- </style>
更多 Web 开发 https://www.html.cn/ ,Web 前端课程 https://www.html.cn/ 的相关知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/vue-js/17943.html