一.安装依赖

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. Dart语言概览

    ## Dart特性 Dart同时支持JIT(Just In Time,即时编译)和AOT(Ahead of Time,运行前编译)两种编译模式. **JIT** 在运行时即时编译,在开发周期中使用,可 ...

  2. Linux变量替换技术

    1.1.1   ${value:-word} 如果变量value没有定义,则返回word,如果已经赋值则返回value变量的值 result=${jimyy:-UNSET} echo $result ...

  3. Java定时发送邮件

    背景 甲方爸爸:新接入业务在国庆以及军运会期间需要每天巡检业务并发送邮件告知具体情况! 我司:没问题. 甲方爸爸:假期也要发噢. 我司:没问题(...). 刚开始计划指定几个同事轮流发送,业务只要不被 ...

  4. Linux 笔记 - 第十一章 正则表达式

    博客地址:http://www.moonxy.com 一.前言 正则表达式(英语为 Regular Expression,在代码中常简写为 regex.regexp 或 RE),是使用单个字符串来描述 ...

  5. 11 (OC)* CoreImage

    coreimage framework 组成 apple 已经帮我们把image的处理分类好,来看看它的结构: 主要分为三部分: 1)定义部分:CoreImage 何CoreImageDefines. ...

  6. 如何基于String实现锁?

    在某些时候,我们可能想基于字符串做一些事情,比如:针对同一用户的并发同步操作,使用锁字符串的方式实现比较合理.因为只有在相同字符串的情况下,并发操作才是不被允许的. 因为String 类型的变量赋值是 ...

  7. JavaSE知识点总结(一)

    第一章 课程介绍第二章 java语言概述 课时2:作业 1.常用软件分为那两类? 系统软件 应用软件 2.人机交互的两种方式是哪两种? 图形化界面 代码行命令 课时3:作业 1.java语言的特性有哪 ...

  8. 在vue中使用[provide/inject]实现页面reload

    在vue中实现页面刷新有不同的方法: 如:this.$router.go(0),location.reload()等,但是或多或少会存在问题,如页面会一闪等 所以建议使用[provide/inject ...

  9. Java 世界的盘古和女娲 —— Zygote

    本文基于 Android 9.0 , 代码仓库地址 : android_9.0.0_r45 文中源码链接: Zygote.java ZygoteInit.java ZygoteServer.java ...

  10. 23种设计模式之工厂方法(Factory Method Pattern)

    工厂方法 前面我们学习了简单工厂,发现一个问题就是简单工厂集合了矛盾,为了解决这个问题我们针对每一种产品提供一个工厂类.通过不同的工厂实例来创建不同的产品实例.在同一等级结构中,支持增加任意产品这种设 ...