最近学习vue,习惯性的通过<script>标签引入jquery,写完后报错才想起来,这种方式在vue是不适用的。

1:因为已经安装了vue脚手架,所以需要在webpack中全局引入jquery

打开package.json文件,在里面加入这行代码,jquery后面的是版本,根据你自己需求更改。

dependencies:{

"jquery":"^2.2.3"

}

然后在命令行中cnpm install

大多人应该都是使用的淘宝镜像,所以使用cnpm,如果你不是 ,可以使用npm安装。

2:在webpack.base.conf.js中加入一行代码

var webpack=require("webpack")

3:在webpack.base.conf.js中module.exports的最后加入这行代码,

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

4:在main.js中引入,加入下面这行代码

import $ from 'jquery'

5:最后一步,重新跑一边就好,cnpm run dev

以上方法我自己试过了,确认可以正常使用,如果有不对的地方欢迎联系我进行改正。

在vue中如何引jquer的更多相关文章

  1. vue中遇到的坑!!!!!

    一 .vue安装的坑 报错时的常见问题 1.cnpm install 模块名 –save-dev(关于环境的,表现为npm run dev 启动不了)cnpm install 模块名 –save(关于 ...

  2. vue中html、js、vue文件之间的简单引用与关系

    有关vue文件记录:index.html在html中运用组件 <body> <app></app> <!-- 此处app的组件为入口js main.js中定义 ...

  3. js微信禁用右上角的分享按钮,和vue中微信页面禁用右上角的分享按钮的问题

    1.隐藏微信网页右上角的按钮 document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() { // 通过下面这个 ...

  4. vue中如何不通过路由直接获取url中的参数

    前言:为什么要不通过路由直接获取url中的参数? vue中使用路由的方式设置url参数,但是这种方式必须要在路径中附带参数,而且这个参数是需要在vue的路由中提前设置好的. 相对来说,在某些情况下直接 ...

  5. vue中的重要特性

    一.vue中的自定义组件 html的代码: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  6. Vue中comoputed中的数据绑定

    Vue中的数据实现响应式绑定是在初始化的时候利用definePrototype的定义set和get过滤器,在进行组件模板编译时实现water的监听搜集依赖项,当数据发生变化时在set中通过调用dep. ...

  7. vue中使用stompjs实现mqtt消息推送通知

    最近在研究vue+webAPI进行前后端分离,在一些如前端定时循环请求后台接口判断状态等应用场景用使用mqtt进行主动的消息推送能够很大程度的减小服务端接口的压力,提高系统的效率,而且可以利用mqtt ...

  8. Vue中应用CORS实现AJAX跨域,及它在 form data 和 request payload 的小坑处理

    基本概念部分(一):理解CORS 说道Vue的跨域AJAX,我想先梳理一遍CORS跨域,"跨域资源共享"(Cross-origin resource sharing),它是一个W3 ...

  9. vue中watched属性

    watched属性,vue中的观察属性,可用来监听一个值的变化 默认有两个参数,新值,旧值 data (){ return { currentCity: "深圳" } } watc ...

随机推荐

  1. POJ 3410 Split convex polygon(凸包)

    题意是逆时针方向给你两个多边形,问你这两个多边形通过旋转和平移能否拼成一个凸包. 首先可以想到的便是枚举边,肯定是有一对长度相同的边贴合,那么我们就可以n2枚举所有边对,接下来就是旋转点对,那么假设多 ...

  2. [集合]HashMap和Hashtable区别

    底层 哈希算法,双列集合 HashMap 线程不安全,效率高,JDK1.2版本    Hashtable 线程安全,效率低,JDK1.0版本 HashMap 可以存储 null 键和 null 值   ...

  3. 思维体操: HDU1022Train Problem I

    Train Problem I Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  4. 通过编写串口助手工具学习MFC过程——(十)UpdateData()用法和编辑框的赋值、取值

    通过编写串口助手工具学习MFC过程 因为以前也做过几次MFC的编程,每次都是项目完成时,MFC基本操作清楚了,但是过好长时间不再接触MFC的项目,再次做MFC的项目时,又要从头开始熟悉.这次通过做一个 ...

  5. oracle数据的导入导出(两种方法三种方式)

    大概了解数据库中数据的导入导出.在oracle中,导入导出数据的方法有两种,一种是使用cmd命令行的形式导入导出数据,另一种是使用PL/SQL工具导入导出数据. 1,使用cmd命令行导入导出数据 1. ...

  6. ThinkPHP无法打开或点击不了Trace的问题

    首先先确认是否打开了Trace配置项,ThinkPHP3.*为'SHOW_PAGE_TRACE'=>true,ThinkPHP5.*为'app_trace'=>true. 如果已经确认开启 ...

  7. 利用WebSocket和EventSource实现服务端推送

    可能有很多的同学有用 setInterval 控制 ajax 不断向服务端请求最新数据的经历(轮询)看下面的代码: setInterval(function() { $.get('/get/data- ...

  8. GROUP BY关键字优化

    1.group by实质是先排序后进行分组,遵照索引建的最佳左前缀 2.当无法使用索引列,增大max_length_for_sort_data参数的设置+增大sort_buffer_size参数的设置 ...

  9. 14.Linux-CentOS系统proc文件系统丢失

    问题: 在强制卸载根目录下的磁盘,导致/proc文件系统丢失. 解决: 重启服务器重新生成.

  10. Maven Pom文件标签详解

    <span style="padding:0px; margin:0px"><project xmlns="http://maven.apache.or ...