vue-cli webpack全局引入jquery(jq通过npm安装的并非本地文件)

1、首先在package.json里加入,

dependencies:{
"jquery" : "^2.2.3"
}

然后 nmp install

2、在webpack.base.conf.js里加入

var webpack = require("webpack")

3、在module.exports的最后加入

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

4、然后一定要重新 run dev。

5、在需要使用的地方 引入就ok了

import $ from 'jquery'

vue-cli引入外部文件(自己下载好的第三方的插件)

在 webpack.base.conf.js 中添加externals

 
externals 中 swiper 是键,对应的值一定的是插件 swiper.js 所定义的变量 Swiper :、
 
之后再在根目录下的index.html文件里引入文件:<script src="static/lib/swiper.js"></script>
这样子就可以在需要用到swiper.js的文件里加入这行代码:import Swiper from 'swiper',这样就能正常使用了。

如何在vue里面正确的引用 jquery 和 第三方插件的更多相关文章

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

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

  2. 如何在 vue 项目里正确地引用 jquery

    转载 2016年11月13日 使用vue-cli构建的vue项目,webpack的配置文件是分散在很多地方的,而我们需要修改的是build/webpack.base.conf.js,修改两处的代码 / ...

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

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

  4. vue 项目里正确地引用 jquery

    一.NPM安装的jQuery 使用vue-cli构建的vue项目,需要修改的是build/webpack.base.conf.js 1.添加引入webpack,后面的plugins那里需要 const ...

  5. 如何在Vue中建立全局引用或者全局命令

    1 一般在vue中,有很多vue组件,这些组件每个都是一个文件.都可能需要引用到相同模块(或者插件).我们不想每个文件都import 一次模块. 如果是基于vue.js编写的插件我们可以用 Vue.u ...

  6. vue-cli配置jquery 以及jquery第三方插件

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

  7. Vue中正确使用jQuery的方法

    题主Vue小白,入门demo时想在其中使用jQuery(当然可能是不推荐的做法哈,毕竟俩儿的风格不一样,但万一你就需要呢 _^ ^_),结果遇到问题,最终倒腾解决. 编译报错:$ is undefin ...

  8. vue :关于引用jquery的二三问题

    webpack版本:3.6.0 首先是引用jquery. 有两个地方要改. 1 (项目地址)/build/webpack.base.conf.js 2 (项目地址)/src/main.js webpa ...

  9. react 或 vue 中引用 jQuery 插件

    前言 今天与遇到一个令人抓狂的事情, 因为项目中有个交互太过于复杂而且冷门, 没有人封装类似react-swiper那种的移植过来的插件 只有现成的jQuery插件. 而时间并不宽裕,自己重写成rea ...

随机推荐

  1. python-if判断

    1. python 条件语句 Python条件语句是通过一条或多条语句的执行结果(True或者False)来决定执行的代码块. 可以通过下图来简单了解条件语句的执行过程: Python程序语言指定任何 ...

  2. 图片base64格式转为file文件类型上传方法

    日常使用文件上传方式,都是通过input type='file'的文件选择框进行文件上传.但是会通过其他交互方式等到图片的base64格式进行上传.具体情况如下示意: 在项目开发中,需要进行照片采集, ...

  3. 渗透实战(周三):Ettercap·ARP毒化&MITM中间人攻击

    今天,我们来讲解如何对小型Wi-Fi局域网发动网络攻击

  4. python 对图片做垂直投影

    Python 对图片做垂直投影 本文利用opencv对图片进行垂直投影,做出垂直投影图,大体思路:打开图片,灰度化,二值化,按列进行统计,新建一个大小和原图一样的图片,按列进行填充: cv2.cv.G ...

  5. 0918如何利用jmeter为数据库插入测试数据

    第一 制定测试计划,关于JMETER会通过驱动取操作数据库,因而请在底部路径填写正确. 下载该资源http://download.csdn.net/download/fnngj/3451945 第二步 ...

  6. [React] Refactor componentWillReceiveProps() to getDerivedStateFromProps() in React 16.3

    The componentWillReceiveProps() method is being deprecated in future version of React (17). Many of ...

  7. eclipse配置默认的jdk

    1.window-preferences-java-Installed JREs-Add-Standard VM-[添加jre6或jre7的路径]

  8. 不使用系统自带的button

    // //  LKTitleBtn.m //  01-彩票 // //  Created by Lenny  on 3/17/15. //  Copyright (c) 2015 Lenny. All ...

  9. Android ADB 常用命令

    Android ADB 常用命令 泛原罪 2016.09.21 00:02* 字数 605 阅读 2912评论 0喜欢 1 [TOC] adb logcat 查看日志 详细内容可参见 ADB Usag ...

  10. nginx FastCGI模块(FastCGI)配置

    http://www.howtocn.org/nginx:nginx%E6%A8%A1%E5%9D%97%E5%8F%82%E8%80%83%E6%89%8B%E5%86%8C%E4%B8%AD%E6 ...