Vue组件中引入jQuery

两种在vue中引入jQuery的方式

1、普通html中使用jQuery

将jQuer的文件导入到项目中,然后直接使用<script src="jQuery.js"></script>即可。

<script src="jQuery.js"></script>
2、vue组件中使用jQuery
  • 安装依赖
cnpm install jquery --save 

// 或者 
npm install jquery --save
  • 组件中直接使用jQuery

        我们想在哪个组件中使用jQuery库,首先要使用如下命令引入jquery,然后就可以正常使用了

import $ from '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>
  • 使用全局变量

        若每一个组件中都去使用jquery,必须在每个组件中写:import $ from 'jquery';比较麻烦,所以使用全局变量

  • webpack.base.conf.js文件中引入:在项目中找到webpack.base.conf.js文件,在开头使用以下代码引入webpack,因为该文件默认没有引用。
let webpack = require('webpack')

  •  在同文件:webpack.base.conf.js中,找到module.exports中添加一段代码
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
jquery: "jquery",
"window.jQuery": "jquery"
})
],

  • 避开eslint 检查

        修改根目录下.eslintrc.js 文件的env 节点,为env添加一个键值对 jquery: true 就可以了

env: {
// 原有
browser: true,
// 添加
jquery: true
}

  • 重新启动项目 npm run dev,可直接使用$

        不需要再import 引用 jQuery 了,可以 直接使用$了,

 console.log($('选择器'))

        你会发现成功使用jQuery获取到了DOM;或者按下面的,能看到jq是一个函数

上一篇:C语言经典算法-8


下一篇:【S32K3 MCAL配置】-6.1-ICU Driver:WKPU外设让MCU芯片从“Low Power Mode低功耗模式”中WakeUp唤醒