只使用jquery:

1.  cnpm install jquery --save

2.   cnpm install @types/jquery --save-dev (不使用ts的不需要安装此声明文件)

3.在使用jquery的文件中:  import $ from 'jquery';

 
 
----------以上便可以在项目中使用jQuery,线面讲解如何在项目中使用jquery的第三方插件 --------

以jquery-caret为例

1. 按上面步骤安装完jquery后,修改webpack配置文件build/webpack.base.conf.js

...
var webpack = require("webpack")
module.exports = {
...
resolve: {
extensions: ['.js', '.vue', '.json'],
modules: [
resolve('src'),
resolve('node_modules')
],
alias: {
'vue$': 'vue/dist/vue.common.js',
'src': resolve('src'),
'assets': resolve('src/assets'),
'components': resolve('src/components'),
// 1. 定义别名和插件位置
'jquery': 'jquery'
}
},
plugins: [
...,
// 2. 配置全局使用 jquery,这里一定要有,因为jQuery第三方插件基于jquery,如果这里不提供,那么使用第三方插件则会报错
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
// jquery: "jquery",
//"window.jQuery": "jquery"
})

]
}

2. 安装第三方插件:cnpm install jquery-caret --save

并在main.ts中引入

import caret from "jquery-caret"
Vue.use(caret)

3. 然后就可以在需要的地方使用了

vue-cli配置jquery 以及jquery第三方插件的更多相关文章

  1. vue项目搭建和开发流程 vue项目配置ElementUI、jQuery和Bootstrap环境

    目录 一.VUE项目的搭建 1. 环境搭建 2. 项目的创建和启动 二. 开发项目 1. 配置vue项目启动功能 2. 开发vue项目 (1)项目文件的作用 (2)vue项目开发流程 (3)vue项目 ...

  2. vue/cli 3 引入 使用jQuery

    注意这里配置的是vue-cli3.0引入jquery的方法,不是vue-cli2.0的配置方法 一.安装jquery npm install jquery --save 二.一般安装成功后在packa ...

  3. vue cli 配置信息说明

    摘自csdn http://blog.csdn.net/hongchh/article/details/55113751

  4. Vue CLI 是如何实现的 -- 终端命令行工具篇

    Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供了终端命令行工具.零配置脚手架.插件体系.图形化管理界面等.本文暂且只分析项目初始化部分,也就是终端命令行工具的实现. 0. 用法 ...

  5. 基于Typescript的Vue项目配置国际化

    基于Typescript的Vue项目配置国际化 简介 使用vue-i18n插件对基于Typescript的vue项目配置国际化,切换多种语言, 配合element-ui或者其他UI库 本文以配置中英文 ...

  6. Webpack+Vue如何导入Jquery和Jquery的第三方插件

    创建一个jquery-vendor.js文件 import $ from 'jQuery'; console.log($); window.$ = $; window.jQuery = $; expo ...

  7. 使用vue脚手架的项目如何引入JQuery第三方插件

    1:下载jquery npm install jquery --save 2:打开build文件夹下的webpack.base.conf.js文件: 1)在最上方 引入webpack  var web ...

  8. Vue中data数据,使用v-model属性绑定第三方插件(例如Jquery的日期插件)无法自动更新

    问题原因就是html结合Vue使用,但是项目又使用了第三方日期控件,这会导致日期值选择形式的更新后,而Vue管理的对应v-model字段并未自动更新,这是因为日期控件未触发Input事件,需要我们在值 ...

  9. 如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件

    copy内容的网址: https://segmentfault.com/a/1190000007020623 使用vue-cli构建的vue项目,webpack的配置文件是分散在很多地方的,而我们需要 ...

随机推荐

  1. Cygwin安装篇,windows平台上运行的类UNIX模拟环境

    1.虚拟光驱的安装 虚拟光驱下载 一路下一步,不再阐述,这些广告选项不要选 2.安装文档,双击ISO文档 ISO下载地址 链接:http://pan.baidu.com/s/1miFVCYO 密码:z ...

  2. Centos防火墙的配置

    Selinux的三种模式:enforcing,passive,disable 临时更改模式:setengorce 1|0        1:enforcing,   0:passive [root@C ...

  3. python的列表数据类型及常用操作

    列表是最常用的Python数据类型,它可以作为一个方括号内的逗号分隔值出现. 列表中的每个元素都分配一个数字 - 它的位置,或索引,第一个索引是0,第二个索引是1,依此类推. 列表可以进行的操作包括索 ...

  4. JDK6 新特性

    JDK6新特性目录导航: Desktop类和SystemTray类 JAXB2实现对象与XML之间的映射 StAX Compiler API 轻量级 Http Server API 插入式注解处理AP ...

  5. QQ群排名霸屏技术居然是这样简单

    最近做了一些收费的QQ群,收多少钱,一块钱的入门费,也就是说进入我的QQ群必须要1块钱的会费. 我的QQ群主要是干嘛呢,放些电影,比如说市面上电影院,正在播放的,最新最热门的,火爆的一些电影. 先前呢 ...

  6. Python学习 :格式化输出

    方式一:使用占位符 % 常用占位符:% s   (s = string 字符串)     % d   (d = digit 整数(十进制))   %  f   ( f = float  浮点数) na ...

  7. 11 非阻塞套接字与IO多路复用(进阶)

    1.非阻塞套接字 第一部分 基本IO模型 1.普通套接字实现的服务端的缺陷 一次只能服务一个客户端! 2.普通套接字实现的服务端的瓶颈!!! accept阻塞! 在没有新的套接字来之前,不能处理已经建 ...

  8. 中恳中笨 搭建flask封装环境

    话不多说,先干再说..... 打开pycharm,创建一个关于flask的项目 2.创建一个App的文件包 3.把staic和templates文件包拖进App里 4.把app.py文件改为manag ...

  9. python 装饰器 生成及原里

    # 装饰器形成的过程 : 最简单的装饰器 有返回值的 有一个参数 万能参数 # 装饰器的作用 # 原则 :开放封闭原则 # 语法糖 :@ # 装饰器的固定模式 #不懂技术 import time # ...

  10. shell重温---基础篇(shell变量&字符串以及git GUI运行shell脚本方式)

    既然是基础篇那肯定是需要对shell的各种需要注意的基本点进行说明了.接下来就是show time...    shell呢,是一个用C语言编写的应用程序,是用户使用linux的桥梁.所以呢,他既是一 ...