一.安装依赖

npm install jquery --save

二.全局导入(必须先安装依赖)

第一步

webpack.base.conf.js里加入(新版的可能找不到这个文件,你可以npm install webpack --save-dev进行手动安装)

var webpack = require("webpack")

第二步

module.exports的最后加入

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

第三步

main.js 引入

import $ from 'jquery'  //你做到这一步页面中你直接使用$就是jq了

新版

直接在main.js 引入

import jquery from 'jquery'  //你做到这一步页面中你直接使用$就是jq了

三.单个vue组件导入(必须先安装依赖)

然后在组件的script中

<script>
import $ from "jquery" //其实嘛你安装依赖后你在node_modlules文件中的一个文件相对路径而已
console.log($) //你可以打印瞧瞧
</script>

vue-cli中使用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 Cli 中使用 Karma / Chrome 执行样式相关单元测试

    在 GearCase 开源项目 中,我使用了 Vue Cli 的默认测试框架.因此和样式相关的东西,都无法进行测试.因为它并不类似于无头浏览器,而是存在于虚拟内存之中. 现状 在如下 button.s ...

  5. [译]怎样在Vue.js中使用jquery插件

    原文:http://gambardella.info/2016/09/05/guide-how-to-use-vue-js-with-jquery-plugins 使用Vue真的太棒了,但是也有可能使 ...

  6. vue cli 中关于vue.config.js中chainWebpack的配置

    Vue CLI  的官方文档上写:调整webpack配置最简单的方式就是在vue.config.js中的configureWebpack选项提供一个对象. Vue CLI 内部的 webpack 配置 ...

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

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

  8. vue cli中的env详解

    前言 相信使用过 vueCli 开发项目的小伙伴有点郁闷,正常开发时会有三个接口环境(开发,测试,正式),但是 vueCli 只提供了两种 development,production(不包含 tes ...

  9. Vue项目中使用jquery插件

    1.引入jquery,并且在vue.config.js里配置 config.plugin('provide') .use(webpack.ProvidePlugin, [{ $: 'jquery', ...

  10. vue项目中引用jquery

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

随机推荐

  1. Spring错误

    今天在学习spring的aop操作时碰到了一个问题: Caused by: org.springframework.aop.framework.AopConfigException: Cannot p ...

  2. Python数据库小程序

    源代码: # dict1 是 字典 , 用来对应相应元素的下标,我们将文件转成列表,对应的也就是文件的下标,通过下标来找文件元素 dict1 = {'sort':0 , 'name':1 ,'age' ...

  3. ScrollView内嵌ViewPager导致ViewPager滑动困难问题

    转自:http://titanseason.iteye.com/blog/1858874 解决方式:重写ScrollView,然后在xml中定义布局的时候,使用自定义的PagerScrollView而 ...

  4. 【第十篇】easyui-datagrid排序 (转)

    本文体验datagrid的排序. □ 思路 当点击datagrid的标题,视图传递给Controller的Form Data类似这样:page=1&rows=10&sort=Custo ...

  5. 七个开源的 Spring Boot 前后端分离项目,一定要收藏!

    前后端分离已经在慢慢走进各公司的技术栈,根据松哥了解到的消息,不少公司都已经切换到这个技术栈上面了.即使贵司目前没有切换到这个技术栈上面,松哥也非常建议大家学习一下前后端分离开发,以免在公司干了两三年 ...

  6. 从网页跳转到自己的app

    展开该数据并点击 Item 0.你将在这里定义自定义 URL scheme 的名字.只需要名字,不要在后面追加 :// — 比如,如果你输入 iOSDevApp,你的自定义 url 就是 iOSDev ...

  7. sys模块理解补充

    首先,我们利用import语句输入sys模块.基本上这句话告诉python,我们想要这个模块.sys模块包含了与python解释器和它的环境有关的函数. 当python执行import sys语句的时 ...

  8. Spring Boot (三): ORM 框架 JPA 与连接池 Hikari

    前面两篇文章我们介绍了如何快速创建一个 Spring Boot 工程<Spring Boot(一):快速开始>和在 Spring Boot 中如何使用模版引擎 Thymeleaf 渲染一个 ...

  9. 如何使用rsync备份

    已知3台服务器主机名分别为web01.backup .nfs主机信息见下表: 角色 外网IP(NAT) 内网IP(LAN) 主机名 WEB eth0:10.0.0.7 eth1:172.16.1.7 ...

  10. [AI] 深度数据 - Data

    Data Engineering Data  Pipeline Outline [DE] How to learn Big Data[了解大数据] [DE] Pipeline for Data Eng ...