一.安装依赖

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. Tomcat运行机制

    Tomcat其实就是一个servlet的容器,因此,它在运行过程中,首先要做以下事情: 1.实现servlet api规范.如request.response.cookie.session等,容器对其 ...

  2. Unity3D_08_XML文件创建,读取,修改,添加

    今天在工作之余学习了一下关于Unity中关于XML的部分. 在这里要注意添加两个命名空间,如下: 一.xml的解析 首先新建一个xml,可以命名为item.xml,拖进assets里面,内容如下: & ...

  3. Jmeter安装图文及入门教程

    一.JMeter介绍 JMeter是Apache组织开发的基于Java的压力测试工具.用于对软件做压力测试,它最初被设计用于Web应用测试,但后来扩展到其他测试领域.它可以用于测试静态和动态资源,例如 ...

  4. 全方位深度剖析PHP7底层源码(已完结)

    第1章 课程介绍本章主要介绍课程要讲的知识点,以及课程要求等. 第2章 PHP7的新特性本章主要介绍PHP7的新特性,做基准测试,与PHP5对比验证PHP7的性能提升程度,引出对PHP7源码学习的必要 ...

  5. Linux 笔记 - 第九章 Linux 中软件的安装

    博客地址:http://www.moonxy.com 一.前言 在 Linux 系统中,应用程序的软件包主要分为两种:1)第一种是二进制的可执行软件包,也就是解开包后就可以直接运行.在 Windows ...

  6. 如何编写出高质量的 equals 和 hashcode 方法?

    什么是 equals 和 hashcode 方法? 这要从 Object 类开始说起,我们知道 Object 类是 Java 的超类,每个类都直接或者间接的继承了 Object 类,在 Object ...

  7. java架构之路-(mysql底层原理)Mysql之让我们再深撸一次mysql

    让我再深撸一次mysql吧,这次主要以应对面试来说说mysql,大概几个方向,索引结构,查询引擎,索引优化,explain的详解和trace工具的使用. 索引: 我们先来看一下mysql的B+tree ...

  8. Python学习-is和==区别, encode和decode

    一.is 和 == 介绍 1. is  比较的是两个对象的内存地址是否相同,它们是不是同一个对象. 2. ==  比较的是两个对象的内容是否相同. 在使用is前,先介绍Python的一个内置函数id( ...

  9. String StringBuffer StringBuilder的异同

    1.String与StrIngBuffer StringBuilder的主要区别在于StrIng是不可变对象,每次对String对象进行修改之后,相对于重新创建一个对象. String源码解读: pr ...

  10. Github 入门1 (下载git , 连接本地库与github仓库)

    /* 本篇建立在以注册GitHub账号的前提下*/ (1)  下载 git  https://www.git-scm.com // win10 可以直接红色箭头标识的 Download 2.22.0 ...