如果想在普通的HTML页面引入jQuer库的话,直接使用<script src="jQuery.js"></script>即可。但是如果要在Vue组件中使用jQuery库的话,使用这样的方式就不行了,需要使用以下方法
一、安装jQuery依赖
在使用jQuery之前,我们首先要通过以下命令来安装jQuery依赖:
npm install jquery --save # 如果你更换了淘宝镜像,可以使用cnpm来安装,速度更快 cnpm install jquery --save
二、修改配置文件
完成安装jQuery依赖之后,我们要修改 webpack.base.conf 文件配置文件。注意我现在的Vue版本是2.9,如果你使用的是Vue3.x版本的话,这个配置文件的位置可能不一样,需要你在项目中找一下。
在项目根目录下的build目录下找到webpack.base.conf.js文件,在开头使用以下代码引入webpack,因为该文件默认没有引用。
var webpack = require('webpack')
然后在module.exports中添加一段代码配置jQuery插件:
// 添加代码 plugins: [ new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery", }) ],
三、在组件中引入jquery,进行使用
我们想在哪个组件中使用jQuery库,首先要使用如下命令引入jquery,然后就可以正常使用了
import $ from 'jquery'
四、在Vue组件中的script块中使用
比如我们要在 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前端知识,请查阅 HTML中文网 !!
以上就是vue中用jquery怎么用?的详细内容,更多请关注易知道|edz.cc其它相关文章!