vue项目中如何全局引入jquery

最新推荐文章于 2021-04-24 21:38:47 发布
最新推荐文章于 2021-04-24 21:38:47 发布
阅读量7.1k 收藏 4
点赞数 2
分类专栏： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhushikezhang/article/details/81133824
版权

说明：在index.html直接用<script>标签引入，不会生效的，正确引入姿势如下：

1：打开package.json文件，手动在dependencies中加入如下代码；

2：运行cnpm install，这样就会引入版本为2.1.1的jquery作为依赖；

3：打开webpack.base.conf.js文件，对该文件进行两处修改，如下图：

4：在需要的页面（如index.vue）中添加：import $ from 'jquery'，即正确引入jquery，可以在需要的地方使用jquery；

5：重新运行项目（npm run dev）即可；

注释科长
关注
专栏目录
Vue-cli4.x中Jquery的引入及使用
qq_43620423的博客
08-02 1009
一、安装Jquery 进入到项目所在目录之后使用npm进行安装， npm install jquery --save 安装之后就会发现在package.json中已经引入了jquery依赖 二、进行配置 由于是Vue-cli4.x，所以在文件目录中并没有build文件夹，所以需要手动在根目录新建vue.config.js文件来进行配置 const webpack = require('webpack') module.exports = { //引入jquery chainWebpa
vue项目怎么全局引入jquery
qq_45067263的博客
11-01 1687
项目场景： vue项目怎么引入jquery 使用jq的时候报错$ is not defined 在main.js中引入后，组件内使用$报$未定义，只有在组件中import $ from 'jquery'才可以太麻烦 配置都可以的直接看解决方案，没配置的从头来 首先看有无配置webpack package.json里面搜索webpack，没用的话安装 webpack npm install webpack --save-dev(在本地安装) 配置的有weibpack，但是没有webpack.base.con
Vue 全局使用Jquery
wanghui374的博客
02-21 1214
vue 全局使用Jquery 1、安装Jquery npm install jquery -S 2、在webpack.base.conf.js中加入一行代码 var webpack=require(&amp;quot;webpack&amp;quot;) 3、在webpack.base.conf.js中module.exports的最后加入这行代码 plugins: [ new webpack.optimize.Com...
vue-cli中如何引入jquery
10-23 159
前言 　　虽然vue不推荐直接操作DOM，而且也提供了操作DOM的方式。但是在某些时候还是要用到jquery(囧)，那么如何在使用vue-cli的时候引入jquery呢？ 安装 　　国内镜像 cnpm 安装 cnpm install jquery --save-dev 配置 　　webpack有providePlugin插件，可以自动引入模块。所以需要在项目工程的we...
vue-cli4中全局引入jquery
诗水人间
01-01 1020
先安装依赖 npm install jquery 在src同级目录下新建一个vue.config.js文件 粘贴下面内容到这个文件中即可 const webpack = require('webpack') module.exports = { //引入jquery chainWebpack: config => { config.plugin('provide').use(webpack.ProvidePlugin, [{ $: 'jqu
vue 使用jquery (全局)
asdfghjk11111111的博客
08-02 317
1 全局配置jquery , 个人习惯 , 离不开jquery了 然后重启项目 就 完事 转载于:https://www.cnblogs.com/sunjinggege/p/9407040.html
vue cli3 引入jquery的方法
qilv1020的博客
04-24 197
1.在终端运行（运行之后package.json的开发依赖（devDependencies）中会出现 "jquery": "^3.6.0",） npm install jquery --save-dev 2.在vue.config.js中第一行输入（这个文件需要自己在项目根目录下创建的） const webpack = require('webpack') 3.在 module.exports 的 plugins 里面输入 new webpack.ProvidePlugin({
在Vue项目中引入JQuery-ui插件的讲解
10-17
在Vue项目中引入JQuery-ui插件是前端开发中的一个实用技术点，它可以让我们在使用Vue框架的同时，利用JQuery-ui提供的丰富UI组件和功能。JQuery-ui是基于JQuery的用户界面库，它包括日期选择器、滑块、进度条等许多...
vue中如何引入jQuery和Bootstrap
11-27
在Vue.js项目中引入jQuery和Bootstrap是开发过程中常见的需求，特别是在需要使用Bootstrap的UI组件或者jQuery的DOM操作功能时。以下是如何在Vue项目中完成这一过程的详细步骤： ### 一、引入jQuery 1. **安装...
vue-cli引入jquery
一一
10-12 117
通过命令下载jquery npm install jquery --save-dev 在项目目录下build下的webpack.base.conf.js文件头部加入 var webpack = require('webpack') 并在module.exports的尾部加入 plugins: [ 　　new webpack.optimize.CommonsChunkPlugin(...
vue-cli 引入 jquery
qq_39241421的博客
10-23 244
美了美了，醉了醉了。刚使用Vue要实现，轮播的功能。目前问题，思想知识局限，导致不会用Vue实现轮播+响应式的设计。 项目紧急，我只能想到用jq来实现动态效果,数据逻辑还是用VUE实现。 于是我就开始按照这个思路写东西，首先引入Jq就出现一个问题：npm 报错， 网上查了一下是因为对windows系统操作权限原因。于是按照猿猿们的方法， 第一步删掉已有的node_module 文件夹， ...
vue-cli引入Jquery
qq_42734999的博客
07-17 134
一、命令行安装 cnpm install jquery --save-dev 二、配置 webpack有providePlugin插件，可以自动引入模块。所以需要在项目工程的webpack.base.config.js中添加以下配置： const webpack = require('webpack') plugins: [ new webpack.ProvidePlugin({ //引入...
vue-cli 中引入jQuery
coder丶东的博客
07-24 402
一、npm 包安装 npm install jquery --save-dev 二、配置webpack.base.config.js webpack有providePlugin插件，可以自动引入模块。所以需要在项目工程的webpack.base.config.js中添加以下配置： const webpack = require('webpack') plugins: [ ...
vue-cli webpack全局引入jquery
jjsnc
07-26 1992
1：首先在package.json里加入dependencies:{ "jquery" : "^2.2.3" }2：然后 npm install3：在webpack.base.conf.js里加入var webpack = require("webpack")4： module.exports的最后加入plugins: [ new webpack.optimize.CommonsChunkPlu
vue-cli 3.0引入jquery
weixin_34235135的博客
05-19 304
2019独角兽企业重金招聘Python工程师标准>>> ...
vue项目中全局引用jquery 、引用外部js的多种方式（外部纯函数js、外部自执行js、外部js插件），附niceScroll滚动条插件使用
热门推荐
zhouzuoluo的博客
12-04 1万+
vue项目中全局引用jquery ： 1、“   npm install jquery --save    ” 命令安装jquery 2、在项目根目录下的 build 目录下找到webpack.base.conf.js 文件，在开头使用以下代码引入webpack，如下 var webpack = require('webpack') 3、在webpack.base.conf.js 配置文...
vue-cli引入jquery、bootstrape
12-02 1007
jquery和bootstrap真的是神器哈哈~引入jquery1.在vue-cli目录下运行npm install jquery –save-dev，如果安装了cnpm淘宝镜像建议使用cnpm。2.打开build/webpack.base.conf.js，加入以下代码var webpack = require('webpack'); plugins:[ new webpack.optimi
vue-cli3 引入jquery
weixin_39975379的博客
02-26 8346
本篇博客转载于https://juejin.im/entry/5b446efde51d45194e0b8985，写在这里只是用于记录。 vue-cli3的所有的配置项都在vue.config.js的文件中进行配置，so步骤搞起来： 第一步：安装jquery 命令行工具，进入项目文件夹，执行：  npm install jquery --save 第二步:确定安装成功 提示安装成功后，在p...
vue定义全局方法
weixin_43078608的博客
07-05 3446
在开发的时候经常会使用到相同的函数，例如时间转换函数，但又不能在每个页面定义一个方法，这未免有点蠢，一般都单独写一个js文件，使用vue.prototype定义为全局方法。 一.定义js文件 二.引入文件 import commonFunction from '@/util/commonFunction.js'//引入公共方法 Vue.use(commonFunction...
vue项目全局token, jquery
最新发布
06-10
对于 Vue 项目中的全局 token，可以使用 Vue 的插件机制将其注入到 Vue 实例中，从而在整个项目中都可以使用该 token，例如： ```javascript // 创建一个 Vue 插件 const TokenPlugin = { install(Vue) { Vue.prototype.$token = "your-global-token"; } }; // 在 Vue 项目中使用该插件 Vue.use(TokenPlugin); // 在组件中使用全局 token export default { created() { console.log(this.$token); // 输出 "your-global-token" } }; ``` 至于 jQuery，它是一个独立的 JavaScript 库，不依赖于 Vue。如果你需要在 Vue 项目中使用 jQuery，可以通过以下两种方式之一： 1. 在 HTML 文件中直接引入 jQuery： ```html <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> ``` 然后在 Vue 组件中使用全局变量 `$` 来调用 jQuery 方法，例如： ```javascript export default { created() { $("body").css("background-color", "red"); } }; ``` 2. 使用 npm 安装 jQuery，并在 Vue 组件中导入： ```bash npm install jquery ``` ```javascript import $ from "jquery"; export default { created() { $("body").css("background-color", "red"); } }; ``` 注意，使用 jQuery 时需要注意它的版本兼容性问题，尽量使用最新版本的 jQuery。另外，Vue 推荐使用它自带的 DOM 操作方法，如 `this.$refs`、`this.$el` 等，尽量减少对 jQuery 的依赖。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值