一.安装依赖

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. 漫谈Java中的OOPS

    什么是OOPS? 面向对象编程是一种编程概念,其工作原理是对象是程序中最重要的部分.它允许用户创建他们想要的对象,然后创建处理这些对象的方法.操作这些对象以获得结果是面向对象编程的目标. 面向对象编程 ...

  2. 浅谈PHP反序列化漏洞原理

    序列化与反序列化 序列化用途:方便于对象在网络中的传输和存储 0x01 php反序列化漏洞 在PHP应用中,序列化和反序列化一般用做缓存,比如session缓存,cookie等. 常见的序列化格式: ...

  3. Web之-----弹出确认框控件应用

    引用文件!-------- <link rel="stylesheet" type="text/css" href="@Url.FrontUrl ...

  4. Spring Boot 入门之基础构建篇(一)

    博客地址:http://www.moonxy.com 一.前言 随着 Spring 的功能越来越强,在使用 Spring 的时候,门槛也变得高了起来,诸如搭建一个基于 Spring 的 Web 程序却 ...

  5. CSS新增的伪类选择器

    :root 选择文档的根元素,等同于 html 元素 :empty 选择没有子元素的元素 :target 选取当前活动的目标元素 :not(selector) 选择除 selector 元素意外的元素 ...

  6. Mysql学习笔记整理之引擎

    mysql的引擎: myisam引擎 Mysql 5.5之前默认的存储引擎 数据.索引分别存储 (数据物理磁盘---索引物理磁盘) .MYD 存储数据                      表级索 ...

  7. 记一次 JavaScript 浮点型数字误差引发的问题

    需求 车间的工人在生产出来产品后,需要完成初步的自检,并通过手机上报.在实际生产中,用户(工人)不方便进行数值的输入,因而表单中的一些项设计成 picker 模式以供选取数值.数值的取值范围,根据允许 ...

  8. (转)在阿里云 CentOS 服务器(ECS)上搭建 nginx + mysql + php-fpm 环境

    阿里云的云服务器(ECS)可以选择多种操作系统,打算用它运行 Drupal或者 WordPress ,你最好选择 Linux 系统,这篇文章的演示是基于阿里云的 CentOS 操作系统的服务器.我们在 ...

  9. jenkins自动化部署项目7 -- 新建job(将服务代码部署在windows上)

    关于构建结束后jenkins会kill所有衍生子进程的官方解决方案:https://wiki.jenkins.io/display/JENKINS/Spawning+processes+from+bu ...

  10. Jmete压力测试、并发测试的简单方法

    我们的需求场景如下: 服务器硬件:(只有一台) 系统:CentOS 7 WebServer:Tomcat 7.0 Jdk:1.8 CPU:8核 2.9GHz两个 内存:16g 报名应用系统:只需要向外 ...