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. POJ 2208 Pyramids(求四面体体积)

    Description Recently in Farland, a country in Asia, a famous scientist Mr. Log Archeo has discovered ...

  2. POJ 3308 Paratroopers(最大流最小割の最小点权覆盖)

    Description It is year 2500 A.D. and there is a terrible war between the forces of the Earth and the ...

  3. vue学习笔记之:为何data是一个方法

    vue学习笔记之:为何data是一个方法 在vue开发中,我们可以发现,data中的属性值是在function中return出来的.可为何data必须是一个函数呢?我们先看官方的解释: 当一个组件被定 ...

  4. HTML5文档的各个组成部分分类

    <!DOCTYPE html><!--声明文档结构类型--> <html lang="zh-cn"><!--声明文档文字区域--> ...

  5. lintcode-148-颜色分类

    148-颜色分类 给定一个包含红,白,蓝且长度为 n 的数组,将数组元素进行分类使相同颜色的元素相邻,并按照红.白.蓝的顺序进行排序. 我们可以使用整数 0,1 和 2 分别代表红,白,蓝. 注意事项 ...

  6. 3dContactPointAnnotationTool开发日志(十五)

      有时候拖动一个窗口的时候可能直接拖出去了那就再也拖不回来只能reset重新来过:   于是开了个类成员变量在start里记录了一下panel的位置: var lp = panel.GetCompo ...

  7. 【Docker 命令】- push 命令

    docker push : 将本地的镜像上传到镜像仓库,要先登陆到镜像仓库 语法 docker push [OPTIONS] NAME[:TAG] OPTIONS说明: --disable-conte ...

  8. PHPcms企业黄页中,会员注册之后提示经营模式不得少于1个字符 的解决办法

    后台--模块- 黄页模块 ---  企业库 --- 字段 ---   经营模式 ---  字符长度取值范围 1  改为  0. 

  9. H3C SNMP配置解析

    华为交换机snmp配置 snmp-agent                                           /使能snmp服务/snmp-agent local-engineid ...

  10. 深入理解:java类加载器

    概念理解:Java类加载器总结 1.深入理解Java类加载器(1):Java类加载原理解析 2.深入理解Java类加载器(2):线程上下文类加载器