创建一个jquery-vendor.js文件

import $ from 'jQuery';
console.log($);
window.$ = $;
window.jQuery = $;
export default $;

导入JQuery,并赋值给window对象,使其成为一个全局变量。

在vue组件做如下引用

import $ from './assets/jquery-v';
import 'bootstrap-material-design';
//调用初始化
$(function(){
$.material.init();
});

注意:

1. 只可以在vue的组件中引用

2.如果在main.js中引入jquery.js是Ok的,但这种情况下无论是在mian.js或者是vue组件中引入jquery的第三方插件就有问题了。

Webpack+Vue如何导入Jquery和Jquery的第三方插件的更多相关文章

  1. vue之导入Bootstrap以及jQuery的两种方式

    Vue引入bootstrap主要有两种方法 方法一:在main.js中引入,此方法导入的bootstrap中对于html,body的一些预设置的css样式可能无效. 一.引入jQuery 在当前项目的 ...

  2. vue之导入Bootstrap和Jquery

    Vue引入bootstrap主要有两种方法 方法一:在main.js中引入,此方法导入的bootstrap中对于html,body的一些预设置的css样式可能无效. 一.引入jQuery 在当前项目的 ...

  3. webpack系列——webpack3导入jQuery的新方案

    本文的目的 拒绝全局导入jQuery!! 拒绝script导入jQuery!! 找到一种只在当前js组件中引入jQuery,并且使用webpack切割打包的方案! 测试环境 以下测试在webpack3 ...

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

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

  5. vue项目引入bootstrap、jquery

    在进行vue的学习,项目中需要引入bootstrap.jquery的步骤. 一.引入jQuery 在当前项目的目录下(就是package.json),运行命令 cnpm install jquery ...

  6. Vue.Js加入bootstrap及jquery,或加入其他插件vue-resource,vuex等

    .引入jquery 项目目录下输入 cnpm install jquery --save-dev      用npm下载jq依赖 若想加入其他js库,如vue-resource,执行命令cnpm in ...

  7. vue工程化之项目引入jquery

    既然写项目,那么少不了用jq,那我们就引入进来吧 1.因为已经安装了vue脚手架,所以需要在webpack中全局引入jquery 打开package.json文件,在里面加入这行代码,jquery后面 ...

  8. vue/cli 3 引入 使用jQuery

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

  9. Mac下通过npm安装webpack 、vuejs,以及引入jquery、bootstrap等(初稿)

    前言: 初次接触前端开发技术,一些方向都是在同事的指引和自己的探索后,跑了个简易web,迈入全栈系列.由于是事后来的文章,故而暂只是杂记,写的粗略且不清晰,后续将补之. 主要参考文档: http:// ...

随机推荐

  1. 课堂小记---JavaScript(3)

    操作DOM var newDOM=DOM元素.cloneNode(参数); 克隆(复制)当前节点,参数默认为false只复制当前节点元素.参数为true时复制当前元素及其后代和所有属性. day06 ...

  2. Set接口下的集合

    一.集合(定义字段的时候统一使用包装类) 1.集合大类分为List.Set.Map三种,其中,List集合是有序可重复的,并且可以使用普通for循环.增强for循环.正向迭代器.双向迭代器:Set集合 ...

  3. 按键精灵PC版<末日王者>

    更新模式[强制] 更新版本[1.28] 更新链接[https://yunfei-1256035889.cos.ap-beijing.myqcloud.com/%E6%9C%AB%E6%97%A5%E4 ...

  4. 当使用xmapp时session序列化生成的文件的路径

    由于没有安装tomcat而是安的xmapp所以序列化和反序列化时并没有在tomcat的里边生成session文件而是在java的工作路径下生成在以下路径下 D:\pro\java\workspace\ ...

  5. selenium操作浏览器窗口最大化和刷新

    实际测试过程中经常遇到打开一个页面并不是全屏显示,但是却希望它能够全屏显示或者新增一条记录后需要刷新一下看能不能再列表中正常显示. 于是就有了今天的关于对浏览器窗口的最大化和刷新页面.需要说明的一点: ...

  6. MYSQL可调用执行自定义SQL的代码

    DELIMITER $$ USE `mysql_wispeed01`$$ DROP PROCEDURE IF EXISTS `sp_execSQL`$$ CREATE DEFINER=`sa`@`%` ...

  7. 1.3 正则表达式和python语言-1.3.6匹配多个字符串

    1.3.6 匹配多个字符串(2018-05-08) 我们在正则表达式 bat|bet|bit 中使用了择一匹配(|)符号.如下为在 Python中使用正则表达式的方法. import re #bat| ...

  8. mongodb4.0支持事务

    事务特性: 原子性:所有的改变都完成一致性:最终执行结果一致就行隔离性:一个事务的执行不能其它事务干扰.持久性:指一个事务一旦提交,数据不会改变,存在数据库中 exports.getSession = ...

  9. sortable的基本属性

    所有的事件回调函数都有两个参数:event和ui,浏览器自有event对象,和经过封装的ui对象   ui.helper - 表示sortable元素的JQuery对象,通常是当前元素的克隆对象    ...

  10. java课程之团队开发冲刺阶段1.4

    一.总结昨天进度 1.昨天任务全部完成 二.遇到的问题 1.对数据库的使用陌生 2.使用sqlite有些困难 3.对如何解决查询课程问题暂时没有找到好的解决方案 三.今日任务 1.由于周一的课程比较紧 ...