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是一个函数