一、引入 jquery

1. 方式一

默认会安装最新版本 jquery

npm install jquery

2. 方式二

指定版本

npm install jquery@3.6.0

3. 方式三

在 package.json 文件中 dependencies 添加 jquery 配置,以及指定版本

"jquery": "^3.6.0"

在 package.json 文件中加好配置后,执行:

npm install

注:上面两种方法都会自动在这里添加配置。

二、修改配置

1. 在 webpack.base.conf.js 文件中,文件上方添加如下内容:

const webpack = require('webpack')

2. 其次,在 module.exports 中添加如下配置:

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

3. 在 main.js 文件中引入 jquery

import $ from 'jquery'

注:本文参考

vue 项目引入 jquery的更多相关文章

  1. VUE项目引入jquery

    既然写项目,那么少不了用jq,那我们就引入进来吧 1.因为已经安装了vue脚手架,所以需要在webpack中全局引入jquery 打开package.json文件,在里面加入这行代码,jquery后面 ...

  2. vue 项目引入字体报错

    vue 项目引入特殊字体,总是提示有问题 原因是,在webpack 里面的配置有问题 在项目文件里面引入字体的时候,应该写url-loader 而不能是url

  3. vue项目引入bootstrap、jquery

    在进行vue的学习,项目中需要引入bootstrap.jquery的步骤. 一.引入jQuery 在当前项目的目录下(就是package.json),运行命令 cnpm install jquery ...

  4. vue工程化之项目引入jquery

    既然写项目,那么少不了用jq,那我们就引入进来吧 1.因为已经安装了vue脚手架,所以需要在webpack中全局引入jquery 打开package.json文件,在里面加入这行代码,jquery后面 ...

  5. vue中引入jQuery和bootstrap

    一.引入jQuery: 首先在当前项目的根目录下(就是与package.json同目录),运行命令npm install jquery --save-dev   这样就将jquery安装到了这个项目中 ...

  6. Vue如何引入jquery实现平滑滚动到指定位置效果

    在以往的做法里首选jquery的animate实现,但是Vue里并没有这个方法.如何在Vue项目中实现点击导航平滑滚动到指定位置,为了这效果我是快要崩溃了,上网查阅了很久发现并没有真正意义上解决这个问 ...

  7. vue-cli搭建项目引入jquery和jquery-weui步骤详解

    vue简介 Vue.js 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用. Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合 ...

  8. vue项目引入bootstrap正确姿势

    vue如何引入bootstrap 最近在玩全栈,自然少不了vue的使用.使用vue-cli生成的项目想引入bootstrap,需要先安装相应的npm包,然后在代码中显示引入. 1.安装依赖包: cnp ...

  9. 在vue下引入jquery bootstrap

    在vue 项目中引入jquery bootstrap 引入jquery npm install jquery --save-dev 在项目根目录下的build/webpack.base.conf.js ...

  10. vue项目引入FastClick组件解决IOS系统下h5页面中的按钮点击延迟,连续点击无反应的问题

    异常描述: ios系统手机中访问h5页面,按钮点击有延迟,连续点击卡顿.无反应. 异常原因: 这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题:当时的网站都是为大屏幕设 ...

随机推荐

  1. P5683 [CSP-J2019 江西] 道路拆除

    简要题意 给你一个 \(m\) 条边 \(n\) 个点的无向图.你需要去掉一些边,使得 \(1 \to s_1,1 \to s_2\) 连通,且 \(1 \to s_1\) 的最短路径长度小于 \(t ...

  2. Angularjs——初识AngularJS

    AngularJS--初识AngularJS AngularJS是什么 AngularJS是Google开源的一款前端JS结构化框架,它通过对前端开发进行分层,极好地规范了前端开发的风格--它将前端开 ...

  3. YMOI 2019.6.8

    题解 YMOI 2019.6.8 前言 第二回考试,承让拿了第一次rank1,(●ˇ∀ˇ●) 题解 这次考试总体发挥比较好,每一道题都尽可能得取得了所能及的所有分.虽然多少还是有失误,不过在所难免.保 ...

  4. Java long类型转换易犯的错误

    记一个刷题过程中遇到的溢出问题. 在做这道题的时候遇到一个与 long 类型有关的溢出错误. 原始代码如下 class Solution { public int numberOfPairs(int[ ...

  5. 使用“宝塔一键迁移”工具,将typecho博客迁移到京东云cvm云主机

    作者:京东科技 林中 服务器更换.网站搬家,对于很多开发者新手来说不是一件容易的事情,需要迁移网站程序.数据库,修改数据库连接文件等.在云迁移方案中,宝塔是非常简单好用的服务器运维面板,能够极大提升运 ...

  6. DVWA靶场实战(十)——XSS(DOM)

    DVWA靶场实战(十) 五.XSS(DOM): 1.漏洞原理: XSS全称为Cross Site Scripting,由于和层叠样式表(Cascading Style Sheets,CSS)重名,所以 ...

  7. 移动端安卓开发学习记录--Android Studio打断点调试操作步骤记录

    今天我发现一个很迷的事情,我是安卓初学者,发现打印对象的话,打印不出来,但是打印对象的属性值,却可以打印出来,迷啊!!!我好迷茫 咨询大佬后,得知,JAVA打印对象的话,打印出来的不是它自己的内容,而 ...

  8. webpack打包后发现有一部分代码还携带注释,如何解决?/webpack打包删除注释以及console.log--快快点进来看一看吧~~

    1.自己配置了一个webpack,打包后发现里边部分代码还存在注释,顿感不妙 废话不多说 解决如下: npm install terser-webpack-plugin --save-dev 然后在w ...

  9. 性能浪费的日志案例-使用Lambda优化日志案例

    性能浪费的日志案例 注:日志可以帮助我们快速的定位问题,记录程序运行过程中的情况,以便项目的监控和优化.一种典型的场景就是对参数进行有条件使用,例如对日志消息进行拼接后,在满足条件的情况下进行打印输出 ...

  10. 读C#代码整洁之道笔记07_代码评审和集成测试

    1. 代码评审注意事项 1.1. 始终保持代码评审的意识 1.2. 保证代码构建成功 1.3. 确保所有的测试都是通过的 1.4. 注意YAGNI原则 1.5. 检查重复代码 1.6. 使用静态分析器 ...