vue中用jquery怎么用?

vue中用jquery怎么用?下面本篇文章给大家介绍一下在vue中使用jquery的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

如果想在普通的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')

1.jpg

然后在module.exports中添加一段代码配置jQuery插件:

// 添加代码
plugins: [
 new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",

 })
],

2.jpg

三、在组件中引入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怎么用?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » Vue.js 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏