vue中引入jquery

不念不忘少年蓝@ 2022-01-23 00:21 456阅读 0赞

1、在项目中安装jquery。

npm install jquery --save-dev  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hfY19s_size_16_color_FFFFFF_t_70]

2、在项目根目录下的build/webpack.base.conf.js文件中：  
① 先写以下代码

var webpack = require(“webpack”)  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hfY19s_size_16_color_FFFFFF_t_70 1]

②在module.exports的最后写

## plugins: \[   new webpack.optimize.CommonsChunkPlugin(‘common.js’),   new webpack.ProvidePlugin(\{   jQuery: “jquery”,   $: “jquery”   \})   \] ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hfY19s_size_16_color_FFFFFF_t_70 2]

3、在根目录下的\\src\\main.js中引入

import $ from ‘jquery’  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hfY19s_size_16_color_FFFFFF_t_70 3]  
4、此时在vue中全局引入了jquery，可以在script中写jquery语法的代码。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hfY19s_size_16_color_FFFFFF_t_70]: /images/20220123/8e0d9ab44dc4479d9fef0de286fd6cb8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hfY19s_size_16_color_FFFFFF_t_70 1]: /images/20220123/dd903e2a39eb41a6b9a72d25fe1b8261.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hfY19s_size_16_color_FFFFFF_t_70 2]: /images/20220123/a4a4e61dbe924171a7730761101c4784.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hfY19s_size_16_color_FFFFFF_t_70 3]: /images/20220123/bb2b8faa47fa41d4ab1a50ec3324f1ca.png

发表评论取消回复

表情：

评论列表（有 0 条评论，456人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue中如何引入jquery详解

用vue-cli脚手架工具构建项目成功后当需要引入JQ，可用以下方法： 1.首先在package.json里的dependencies加入”jquery” :

小灰灰/ 2023年06月24日 13:29/ 0 赞/ 12 阅读

相关 umijs中引入jquery

移动端H5中，仍旧可以使用jquery的scroll监听滚动，这个监听没有明显的延迟 yarn add jquery --save import $ f

末蓝、/ 2023年03月05日 05:27/ 0 赞/ 13 阅读

相关 vue-cli4最新版中怎么引入jQuery

我们要在vue-cli4最新版中引入jquery主要有以下三个步骤 1.安装jquery 2. 添加vue.config.js文件 3. 引入jq

た入场券/ 2023年02月17日 05:12/ 0 赞/ 79 阅读

相关 vue-cli4中全局引入jquery

先安装依赖 npm install jquery 在src同级目录下新建一个`vue.config.js`文件 ![在这里插入图片描述][watermark_t

墨蓝/ 2023年01月01日 07:52/ 0 赞/ 142 阅读

相关在vue项目中正确的引入jquery

最近学习vue，习惯性的通过<script>标签引入jquery，写完后报错才想起来，这种方式在vue是不适用的。 1：因为已经安装了vue脚手架，所以需要在web

桃扇骨/ 2022年06月13日 08:46/ 0 赞/ 311 阅读

相关 vue项目引入bootstrap及jQuery

引入jQuery：在当前项目下cmd，输入 npm install jquery --save-dev 用npm下载jquery依赖、找到build文件夹下的

淩亂°似流年/ 2022年05月16日 02:45/ 0 赞/ 300 阅读

相关 vue-element-admin的jquery引入

引入前提数据介绍："webpack": "4.16.5" 1.npm install jquery --save 2.在webpack.base.conf.js里面的plu

古城微笑少年丶/ 2022年03月14日 12:56/ 0 赞/ 368 阅读

相关 vue中引入jquery

1、在项目中安装jquery。 npm install jquery --save-dev ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5

不念不忘少年蓝@/ 2022年01月23日 00:21/ 0 赞/ 457 阅读

相关 Vue组件中引入jQuery

如果想在普通的HTML页面引入jQuer库的话，直接使用`<script src="jQuery.js"></script>`即可。但是如果要在Vue组件中使用jQuery库的

￡神魔★判官ぃ/ 2021年11月04日 17:44/ 0 赞/ 463 阅读

相关 vue项目中引入Bootstrap,Jquery

转载于 [https://blog.csdn.net/Take\_up/article/details/77711848][https_blog.csdn.net_Take_

Love The Way You Lie/ 2021年09月17日 21:16/ 0 赞/ 573 阅读