vue+webpack 引入jquery
1 首先 cnpm install jquery;这时jquery已经安装成功,可以使用jquery,但是jquery不是全局的,需要在使用的组件中引入jquery,jquery的路径是jquery/dist/jquery.min.js,
inport $ from "jquery/dist/jquery.min.js" 就可以使用$了;
我们也可以在webpack.base.config.js中配置;路径的别名方便引入:2
2 
之后我们就可以在使用jquery的组件中这样引入
3 import $ from 'jquery';
这是jquery不是全局的,如果要使用在每一个模块中需要import 。比较麻烦,下面是设置jquery为全局的方法:
一。引入jQuery
在当前项目的目录下(就是package.json),运行命令 cnpm install jquery --save-dev 这样就将jquery安装到了这个项目中。在上面步骤的前提下:
修改webpack.base.conf.js(在build文件下)两个地方:
4:加入
var webpack=require('webpack');
5 在module.exports的里面加入

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

6 最后在main.js中加入import $ form 'jquery',完成jquery的引入
ok,这是jquery就是全局的了,在任意模块中都可以使用了
tip:在webpack的output.libraryTarget,需要设置为var,默认值就是var(当 library 加载完成,入口起点的返回值将分配给一个变量),如果设置为commonjs等可能会报错,原因见:output.libraryTarget;
如果想要引入不会以commonjs规范书写的js就可以这样引入,在组件中import之后,因为是commonjs规范,所以会按顺序加载,引入成功
vue+webpack 引入jquery的更多相关文章
- Vue中引入jquery方法
vue-cli webpack 引入jquery 今天费了一下午的劲,终于在vue-cli 生成的工程中引入了jquery,记录一下.(模板用的webpack) 首先在package.json里的 ...
- Vue中引入jquery方法 vue-cli webpack 引入jquery
在vue-cli 生成的工程中引入了jquery(模板用的webpack) 首先在package.json里的dependencies加入"jquery" : "^2.2 ...
- vue中引入jQuery和bootstrap
一.引入jQuery: 首先在当前项目的根目录下(就是与package.json同目录),运行命令npm install jquery --save-dev 这样就将jquery安装到了这个项目中 ...
- 非常简单的vue里面引入jquery
如何在vue里面引入jq了,只需四部就完成 第一步 cnpm install jquery 第二步 打开build文件夹 , 打开webpack.base.conf.js文件找到下面module.ex ...
- VUE项目引入jquery
既然写项目,那么少不了用jq,那我们就引入进来吧 1.因为已经安装了vue脚手架,所以需要在webpack中全局引入jquery 打开package.json文件,在里面加入这行代码,jquery后面 ...
- 在vue下引入jquery bootstrap
在vue 项目中引入jquery bootstrap 引入jquery npm install jquery --save-dev 在项目根目录下的build/webpack.base.conf.js ...
- vue-cli webpack 引入jquery
首先在package.json里的dependencies加入"jquery" : "^2.2.3",然后install 在webpack.base.conf. ...
- 【vue】vue中引入jquery
简洁版: 第一步:首先在package.json中输入"jquery":"^3.2.1",其中“3.2.1”为jquery版本号,按需修改 注:package. ...
- vue中引入jquery
npm install jquery -S 在webpack.base.conf.js里加入 plugins: [ new webpack.optimize.CommonsChunkPlugin('c ...
随机推荐
- [Bzoj3676][Apio2014]回文串(后缀自动机)(parent树)(倍增)
3676: [Apio2014]回文串 Time Limit: 20 Sec Memory Limit: 128 MBSubmit: 3396 Solved: 1568[Submit][Statu ...
- 【spring boot jpa】hql语句报错 :antlr.NoViableAltException: unexpected token: roleName
使用场景:在spring data jpa下使用@Query("hql语句") 然后在项目启动的时候报错 hql语句报错:antlr.NoViableAltException: u ...
- 解决asp.net core 日期格式 datetime Json返回 带T的问题
原文:解决asp.net core 日期格式 datetime Json返回 带T的问题 记录一下: Startup中,将 services.AddMvc(); 改为: services.AddMvc ...
- 解密优秀博士成长史 ——微软亚洲研究院首届博士生学术论坛Panel讨论经验总结
编者按:有人说“一入博门深似海”,读博前应该做好哪些准备?作为一名博士生,应该有怎样的学术或职业规划?导师还是老板?怎样在师生关系上做到双赢?你是导师心目中优秀的博士生吗?相信以上问题在很多同学心中萦 ...
- Android4.42-Setting源代码分析之蓝牙模块Bluetooth(下)
接着上一篇Android4.42-Settings源代码分析之蓝牙模块Bluetooth(上) 继续蓝牙模块源代码的研究 THREE.蓝牙模块功能实现 switch的分析以及本机蓝牙重命名和可见性的分 ...
- Python——正則表達式(2)
本文译自官方文档:Regular Expression HOWTO 參考文章:Python--正則表達式(1) 全文下载 :Python正則表達式基础 ======================== ...
- Serial attached SCSI
http://en.wikipedia.org/wiki/Serial_attached_SCSI Serial attached SCSI From Wikipedia, the free ency ...
- Arrays.asList基本用法
目录 说明 基本用法 陷阱 改观 说明 asList 是 java.util.Arrays 类的一个方法 public static <T> List<T> asList(T. ...
- Nova镜像使用方法
Nova中的虚拟机可以从镜像.卷.卷快照等启动,一般装完OpenStack时,环境中既没有镜像也没有卷,这时候往往 需要上传一些已有的镜像,或者上传ISO文件来安装虚拟机系统.这个文档主要描述如何上传 ...
- 设置GridCtrl中的Checkbox 为不可编辑
m_Grid.SetCellType(index, 1, CGridCtrl::CellType_Check); //设置第index行.第一列的单元格为类似CheckBox的模样 m_Gr ...