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. greenplum资源队列

    1.创建资源队列语法 Command:     CREATE RESOURCE QUEUEDescription: create a new resource queue for workload m ...

  2. jdk8时间格式处理

    SimpleDateFormat 是线程不安全的类,一般不要定义为 static 变量,如果定义为 static,必须加锁,或者使用 DateUtils 工具类. 正例:注意线程安全,使用 DateU ...

  3. Django链接Mysql 8.0 出现错误(1045:Access denied for user 'root'@'localhost' (using password: NO) 的一种解决方法

    运行环境: Django版本2.0 ; Mysql 版本 8.0.11; 错误代码:  django.db.utils.OperationalError: (1045:Access denied fo ...

  4. android网络类型之2G-3G切换

    在android手机‘设置’-‘移动网络类型’里可以看到有关网络类型的选项,一般默认为3G优先. 如果有需要在程序中切换网络类型的朋友,不妨试试下面的方法.这里提供了几种思路,虽然可能对待 手机的方式 ...

  5. JavaSE 学习笔记之继承(五)

    继 承(面向对象特征之一) 好处: 1:提高了代码的复用性. 2:让类与类之间产生了关系,提供了另一个特征多态的前提. 父类的由来:其实是由多个类不断向上抽取共性内容而来的. java中对于继承,ja ...

  6. 重命名文件及html

    import os import nltk from bs4 import BeautifulSoup as bs def get_txt_name_from_bak_name(bak_name): ...

  7. HDU 4456 Crowd

    Crowd Time Limit: 5000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submi ...

  8. 草草搞了个SERVLET的注册登陆功能

    按书来的,学习阶段,一切都好新奇..至少对比于DJANGO,好像复杂点点,但HTTP的东东,是相通的哈. package cc.openhome.controller; import java.io. ...

  9. 韩国 DBA 博客

    http://mysqldba.tistory.com/ http://cafe.naver.com/mysqlpg http://cafe.naver.com/realmysql http://wi ...

  10. C# - Generics

    Generics were added to version 2.0 of the C# language and the common language runtime (CLR). Generic ...