vue-cli中引入jquery的方法

以前写vue项目都没有引入过jquery,今天群里面的一位小伙伴问了我这个问题,我就自己捣鼓了一下,方法如下:

我们先进入webpack.base.conf.js文件,开始顶部是这样的,我们需要加一行代码

变成这样

var path = require('path')
var utils = require('./utils')
var webpack = require("webpack") //这是我们添加的
var config = require('../config')
var vueLoaderConfig = require('./vue-loader.conf')

然后到下面的module.exports内部加入

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

我们在上面引入webpack就是为了在此使用webpack对象;

然后在package.json里的dependencies加入"jquery" : "^1.8.0";或者你可以使用npm install  xxx -save去生成

然后我们就可以在main.js里面去导入jquery了

最后,重启项目

最最后,骚年,去浪吧

vue-cli中引入jquery的方法的更多相关文章

  1. 在vue项目中引入jquery

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

  2. vue-cli3.0以上项目中引入jquery的方法

    这里配置的是vue-cli3.0引入jquery的方法,不是vue-cli2.0的配置方法 一.安装jquery npm install jquery --save 二.在vue.config.js ...

  3. Vue组件中引入jQuery

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

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

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

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

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

  6. vue/cli 3 引入 使用jQuery

    注意这里配置的是vue-cli3.0引入jquery的方法,不是vue-cli2.0的配置方法 一.安装jquery npm install jquery --save 二.一般安装成功后在packa ...

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

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

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

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

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

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

随机推荐

  1. LeetCode 108——将有序数组转化为二叉搜索树

    1. 题目 2. 解答 一棵高度平衡的二叉搜索树意味着根节点的左右子树包含相同数量的节点,也就是根节点为有序数组的中值. 因此,我们将数组的中值作为根节点,然后再递归分别得到左半部分数据转化的左子树和 ...

  2. jdk1.8新特性-Lambda表达式使用要点

    前言 在jdk1.8出来的时候看到过,没怎么了解.但是最近再看kafka和spark框架,框架示例中ava版的很多地方用到Lambda表达式,发现使用Lambda表达式代码确实简单了好多,有些例子大致 ...

  3. Thunder团队第三周 - Scrum会议6

    Scrum会议6 小组名称:Thunder 项目名称:i阅app Scrum Master:宋雨 工作照片: 代秋彤照相,所以图片中没有该同学. 参会成员: 王航:http://www.cnblogs ...

  4. 软件工程课堂作业(三)——Right-BICEP软件单元测试

    一.测试方法:Right-BICEP Right-结果是否正确?B-是否所有的边界条件都是正确的?I-能查一下反向关联吗?C-能用其他手段交叉检查一下结果吗?E-你是否可以强制错误条件发生?P-是否满 ...

  5. Mininet实验 MAC地址学习

    实验目的 了解交换机的MAC地址学习过程. 了解交换机对已知单播.未知单播和广播帧的转发方式. 实验原理 MAC(media access control,介质访问控制)地址是识别LAN节点的标识.M ...

  6. iOS- 用MapKit和CoreLocation 来实现移动设备(地图与定位)

    1.前言 发现在很多的社交软件都引入了地图和定位功能,如果我们要想实现这两大功能,需要利用到两个框架:MapKit和CoreLocation   我们先来看看CoreLocation框架:   它可以 ...

  7. TCP系列34—窗口管理&流控—8、缓存自动调整

    一.概述 我们之前介绍过一种具有大的带宽时延乘积(band-delay product.BDP)的网络,这种网络称为长肥网络(LongFatNetwork,即LFN).我们想象一种简单的场景,假设发送 ...

  8. C#中pictureBox笔记

    if (File.Exists(productInfo.预览图路径)) this.picPreview.Image = BitmapFactory.Alloc(productInfo.预览图路径, f ...

  9. Java ArrayList Vector LinkedList Stack Hashtable等的差别与用法(转)

    ArrayList 和Vector是采取数组体式格式存储数据,此数组元素数大于实际存储的数据以便增长和插入元素,都容许直接序号索引元素,然则插入数据要设计到数组元素移动等内存操纵,所以索引数据快插入数 ...

  10. 如何设计好的RESTful API之安全性

    保证RESTful API的安全性,主要包括三大方面: a) 对客户端做身份认证 b) 对敏感的数据做加密,并且防止篡改 c) 身份认证之后的授权 1.对客户端做身份认证,有几种常见的做法: 1)在请 ...