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. [Ynoi2015]纵使日薄西山

    题目大意: 给定一个序列,每次单点修改,然后进行询问. 定义一次操作为,选择一个位置$x$,将这个位置的数和左边.右边两个位置的数(不存在则忽略)各减去1,然后和0取max. 对序列中最大的位置进行一 ...

  2. SQLSERVER2017 链接数据库不行

    以为作业要把mysql 数据导入sqlserver,自己装了sqlserver2017, 通过ODBC 来先创建ODBC,mysql的数据库然后测试成功后,在sqlserver创建链接数据库,一直有问 ...

  3. Codeforces 902C/901A - Hashing Trees

    传送门:http://codeforces.com/contest/902/problem/C 本题是一个关于“树”的问题. 将一棵高度为h的有根树表示为数列{ai|i=0,1,2,...,h},其中 ...

  4. (30)导入时如何定制spring-boot依赖项的版本【转载】【从零开始学Spring Boot】

    此文章转载地址:http://www.tuicool.com/articles/RJJvMj3 请注重作者的版权. spring-boot通过maven的依赖管理为我们写好了很多依赖项及其版本,我们可 ...

  5. 0608MySQL备份与恢复之percona-xtrabackup软件的使用【基础】

    转自http://blog.csdn.net/justdb/article/details/17054579 一 使用percona-xtrabackup的原因 在前面,我们讲到MySQL冷备.热备. ...

  6. SQL SERVER高级知识积累

    什么叫做高可用服务器? 高可用服务器简单来理解就是不宕机的服务器 什么叫走服务器的自动化灾备? 自动灾备的意思就是,让从服务器自动变成主服务器 sql server的聚合是什么? 事务会引起性能下降, ...

  7. Spring深入理解(二)

    这个方法实现了 AbstractApplicationContext 的抽象方法 refreshBeanFactory,这段代码清楚的说明了 BeanFactory 的创建过程.注意 BeanFact ...

  8. Noip2011瑞士轮题解

    题目背景 在双人对决的竞技性比赛.如乒乓球.羽毛球.国际象棋中.最常见的赛制是淘汰赛和循环赛.前者的特点是比赛场数少.每场都紧张刺激,但偶然性较高.后者的特点是较为公平,偶然性较低,但比赛过程往往十分 ...

  9. ORA-09925: Unable to create audit trail file汇总

    今天一兄弟的库报ORA-09925: Unable to create audit trail file,当时查 df -h有可用空间,文件夹的权限也正确,未df -i查看Inodes使用情况,审计文 ...

  10. fzu 1075 分解素因子

    代码: #include<cstdio> #include<cstring> #include<iostream> using namespace std; int ...