webpack中的vue组件引用jquery

前言

 main.js中我们引用了 jquery，$符号我们可以正常使用，但 window.$却不能，而且其他vue组件中也引用不到$；为什么呢？因为webpack是最后会把代码用闭包的方式打包，$对象并没有挂载在window下，其他组件中并没有引用jquery所以它自然是拿不到的，那么怎么能做到在main.js中一次引用，每个组件都能拿到呢？

方法一：expose-loader 讲jquery暴露至全局

操作

终端

npm i expose-loader -D //安装expose-loader

webpack.config.js （vue-cli 创建的项目可在 webpack.base.conf.js）中配置当引用 jquery 时使用 expose-loader

module: {
	rules: [
		{
			test: require.resolve('jquery'),
			loader: 'expose-loader?$'
		}	
	]
}

方法二：webpack插件法，给每个模块注入$

操作

webpack.config.js（vue-cli 创建的项目可在 webpack.base.conf.js）

const webpack = require('webpack')

plugins:[
  new webpack.ProvidePlugin({
   $: "jquery",
   jQuery: "jquery",
   jquery: "jquery",
   "window.jQuery": "jquery",
   "window.$": "jquery",
  })
 ]

通过以上两种方法后，我们可以在组件中使用jquery了

---

App.vue

<template>
	<div>
		<h4>这是App组件</h4>
	</div>
<template>

<script>
	$('h4').css('color','#c87')
</script>

<style scoped>

</style>