虽然vue不推荐直接操作DOM,而且也提供了操作DOM的方式。但是在某些时候还是要用到jquery,那么如何引入jquery呢?

费了半天劲,记录一下:

一 : 安装jquery

npm install jquery --save

二 : 配置 在项目 build 里的webpack.base.conf.js

首先在webpack.base.conf.js里加入:(webpack的引入要在第一行)

var webpack = require("webpack")

然后在module.exports的最后加入

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

三:使用 在需要使用的地方引入

import $ from 'jquery';

这样就可以正常调用'$'了

最后注意要重启项目:npm run dev

vue项目如何引用jquery的更多相关文章

  1. vue项目中引用jquery

    1.使用npm安装 npm i jquery --S //jquery要小写 2.在package.json文件dependencies里面加入jq 3.在build文件夹的webpack.base. ...

  2. 在vue项目中引入jquery

    在vue项目中引入jquerycnpm install jquery --save在main.js中引入,加入下面这行代码:import 'jquery'注:有些项目是按需加载的,在main.js里面 ...

  3. vue :关于引用jquery的二三问题

    webpack版本:3.6.0 首先是引用jquery. 有两个地方要改. 1 (项目地址)/build/webpack.base.conf.js 2 (项目地址)/src/main.js webpa ...

  4. 如何在Vue项目中引入jQuery?

    假设你的项目由vue-cli初始化 (e.g. vue init webpack my-project). 在你的vue项目目录下执行: npm install jquery --save-dev 打 ...

  5. 在vue项目中引用element-ui时 让el-input 获取焦点的方法

    在制作项目的时候遇到一个需求,点击一个按钮弹出一个input输入框,并让输入框获得焦点,项目中引用了ElementUI 在网上查找了很多方法,但是在实际使用中发现了一个问题无论是使用$ref获取inp ...

  6. vue项目中引用echarts的几种方式

    准备工作: 首先我们初始化一个vue项目,执行vue init webpack echart,接着我们进入初始化的项目下.安装echarts, npm install echarts -S //或   ...

  7. 在vue项目里使用jquery

    1.NPM 安装 jQuery,项目根目录下运行以下代码 npm install jquery --save 2.webpack配置在项目根目录下的build目录下找到webpack.base.con ...

  8. vue-cli3搭建的vue项目中使用jquery

    装包:npm install jquery --save 方式一 全局使用 1)main.js中引入 // jquery import $ from 'jquery' Vue.prototype.$ ...

  9. 脚手架搭建的vue项目里引入jquery和bootstrap

    引入jquery: 1.在cmd输入:npm install jquery,回车,等待.. 2.在webpack.base.conf.js里进行如下操作: 3.在webpack.prod.conf.j ...

随机推荐

  1. find -or 用法

    find /opt/IBM/WebSphere85/ -name *loggeter* - or -name *loggetter* | xargs rm -rf

  2. kubernetes之配置Metrics Server

    Kubernetes 1.8 关于资源使用情况的 metrics,可以通过 Metrics API 获取到, Kubernetes 1.11 已经废弃 heapster.这里我们基于 Kubernet ...

  3. CKKS Part2: CKKS的编码和解码

    该文章翻译自CKKS EXPLAINED, PART 2: FULL ENCODING AND DECODING,主要介绍CKKS方案中是如何编码和解码的(如何将复数向量转成整数多项式,以及如何求逆运 ...

  4. maven中profiles使用详解

    使用的场景 常常遇到一些项目中多环境切换的问题.比如在开发过程中用到开发环境,在测试中使用测试环境,在生产中用生产环境的情况.springboot中提供了 spring.profile.active的 ...

  5. Atcoder ARC-060

    ARC060(2020.7.8) A 背包板子 B 首先感觉这个东西应该不能直接 \(O(1)\) 算出来,那么复杂度应该就是 \(O(\log n), O(\sqrt{n}), O(\sqrt{n} ...

  6. Lua非常有用的工具——递归打印表数据

    摘要: Lua是一种非常小巧的语言.虽小,但五脏俱全. 在Lua中,我认为最最核心的数据结构就是表.表不仅可用作数组,还可以用作字典.Lua面向对象的实现也是用表实现的. 表对于Lua实在是太重要了! ...

  7. 清除git中缓存的凭证(用户名及密码)

    今天刚接触Git,还有Gitstack,然后在克隆Gitstack服务器上的仓库时出现了一直用户身份识别失败问题,找了一些大佬的文章才知道原因在于密码输入错误过多.那么如何重新输入呢? 需要清空本地的 ...

  8. TestNG--@Factory

    原文地址:http://blog.csdn.net/wanghantong TestNg的@Factory注解从字面意思上来讲就是采用工厂的方法来创建测试数据并配合完成测试 其主要应对的场景是:对于某 ...

  9. 全局定义UINavigationContoller--By秀清

    // // NavController.m // // Created by Joe Zhang on 15/5/23. // Copyright (c) 2015年 张秀清. All rights ...

  10. 使用Docker安装ElasticSearch和可视化界面Kibana【图文教学】

    一.前言 Elasticsearch是一个基于Lucene的搜索服务器.它提供了一个分布式多用户能力的全文搜索引擎,基于RESTful web接口.Elasticsearch是用Java语言开发的,并 ...