简洁版:

第一步:首先在package.json中输入"jquery":"^3.2.1",其中“3.2.1”为jquery版本号,按需修改

注:package.json位置为根目录

第二步:输入指令:npm (cnpm)install jquery --save-dev

第三步:配置webpack.base.conf.js

var webpack=require("webpack");

module.exports的最后加入这行代码:

plugins: [
new webpack.optimize.CommonsChunkPlugin('common.js'),
new webpack.ProvidePlugin({
    jQuery: "jquery",
    $: "jquery"
})
]

注:webpack.base.conf.js位置为build文件夹下

第四步:main.js中加入import $ from 'jquery' 完成jQuery的引入

相关资料:http://blog.csdn.net/bright2017/article/details/74188320

https://www.cnblogs.com/haimishasha/p/6556410.html

作者:smile.轉角

QQ:493177502

【vue】vue中引入jquery的更多相关文章

  1. 在vue项目中引入jquery

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

  2. Vue组件中引入jQuery

    一.安装jQuery依赖 在使用jQuery之前,我们首先要通过以下命令来安装jQuery依赖: npm install jquery --save # 如果你更换了淘宝镜像,可以使用cnpm来安装, ...

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

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

  4. vue系列---vue项目(已安装vuex)中引入jquery

    vue项目中引入jquery有很多方法,这只是其中一种. 步骤如下: 1,安装jquery依赖 npm install jquery --save 如果是使用淘宝镜像则将npm改为cnpm 2,修改配 ...

  5. 前端学习笔记系列一:10整体移动vscode代码块、VSCode 使用 stylus,配置格式化设置、在vue项目中引入bootstrap

    1.整体移动vscode代码块 凭借操作的经验我们能够轻松地知道将代码整体往右移只需选中代码按Tab键即可.其实往左移也很简单: 选中之后按下 shift+Tab键 即可. 2.VSCode 使用 s ...

  6. 每天一点点之vue框架开发 - 引入Jquery

    1. 安装jquery npm install jquery --save-dev 2.在build/webpack.base.conf.js中添加如下内容 var webpack = require ...

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

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

  8. vue element-ui中引入第三方icon

    vue element-ui中引入第三方icon 把图标加入项目 设置项目名称,下载项目(项目名称自定义) 解压项目到开发目录 在main.js中全局引入css文件 修改下载下来的项目中的css文件, ...

  9. vue项目中引入Sass

    Sass作为目前成熟,稳定,强大的css扩展语言,让越来越多的前端工程师喜欢上它.下面介绍了如何在vue项目 中引入Sass. 首先在项目文件夹执行命令 npm install vue-cli -g, ...

  10. vue-cli中引入jquery的方法

    vue-cli中引入jquery的方法 以前写vue项目都没有引入过jquery,今天群里面的一位小伙伴问了我这个问题,我就自己捣鼓了一下,方法如下: 我们先进入webpack.base.conf.j ...

随机推荐

  1. 为什么越来越少的人用jQuery

    摘要:JQuery该退役了. 原文:为什么越来越少的人用jQuery 作者:Lemonade Fundebug经授权转载,版权归原作者所有. 最早期的开发,大多都使用jQuery,它给我们带来了很多的 ...

  2. 用js实现博客打赏功能

    前几天在一个博客中看到有一个打赏功能.其实简单说来就是在页面中加入动态DOM节点,使用的也是简单的HTML.CSS.JS这些前端的一些简单知识.在GitHub上有开源的代码,这里稍加改造就可以用在自己 ...

  3. react-router 嵌套路由 内层route找不到

    今天在做嵌套路由的时候,没有报错,但是页面显示为空,搜索了一下资料,有两个原因: 1.exact精确匹配 <Route component={xxx} path="/" /& ...

  4. JavaScript中的let和const

    在ES6之前,JavaScript中只有两种作用域:全局作用域和函数内部的局部作用域.ES6中新增了两个重要的关键字,let和const,从而引入了块级作用域. 关键字var 使用var关键字声明的变 ...

  5. [工具配置]requirejs 多页面,多入口js文件打包总结

    需要明确以下几点: 1.本地前端调试代码肯定是调用原始的路径以及代码,但是线上运行的肯定是通过打包后的另一个路径,这儿就是生成的dist文件夹了. 2.requirejs的引入,线上跟线下的路径怎么控 ...

  6. vuejs2.0与1.x版本中怎样使用js实时访问input的值的变化

    vuejs 2.0中js实时监听input 在2.0的版本中,vuejs把v-el 和 v-ref 合并为一个 ref 属性了,可以在组件实例中通过 $refs 来调用.这意味着 v-el:my-el ...

  7. python3 os模块

    os模块就是对操作系统进行操作,这个模块提供了一种使用操作系统相关功能的可移植方式.1.系统信息 posix.uname_result(sysname='Linux', nodename='liang ...

  8. springboot 整合 redis

    jedis 和 lettuce 都是用来连接 redis 的客户端,jedis 如果不使用连接池是非线程安全的,lettuce 使用 netty 线程安全且并发性能更好: springboot 2.x ...

  9. JavaScript面向对象编程指南(六) 继承

    第6章 继承 6.1 原型链 6.1.1原型链示例 原型链法:Child.prototype=new Parent(); <script> function Shape(){ this.n ...

  10. Python 爬虫实例(爬百度百科词条)

    爬虫是一个自动提取网页的程序,它为搜索引擎从万维网上下载网页,是搜索引擎的重要组成.爬虫从一个或若干初始网页的URL开始,获得初始网页上的URL,在抓取网页的过程中,不断从当前页面上抽取新的URL放入 ...