创建一个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. python 项目实例

    参考:  https://blog.csdn.net/yz764127031/article/details/71522161 https://www.cnblogs.com/linuxprobe/p ...

  2. linux磁盘满了的处理

    1.查看磁盘使用情况 cd  / df -h 如果 总量Size和Used一样,按就证明磁盘满了 2.查看当前文件下每个文件大小 du -sh * 一层一层去查,就可以查到占用空间最大的那个文件及产生 ...

  3. c# asp.net mvc使用斑马GK888t打印机打印标签

    前言 c#语言,asp.net mvc,南京都昌电子病历模板工具(类似word),斑马GK888t,打印手腕带和标签纸. 实现步骤为:在页面上显示一个或多个都昌模板工具,点击页面上的button,出现 ...

  4. c# asp.net mvc4 使用uploadify插件实现上传功能

    [1]首先去官网下载插件:http://www.uploadify.com/download/ .ww我使用的是免费的,基于flash的版本.因为基于H5的版本需付费使用,然后使用该插件也就是做做毕设 ...

  5. 阿里云 DTS 实践

    控制台 https://dts.console.aliyun.com/#/task/basic/ 操作 填写源目标和目的数据库信息 选择需要迁移的数据库 检查通过 现在好像是免费的,计时收费也很便宜 ...

  6. 关于 js中replace 特殊符号 ‘.’ 的问题

    问题: 字符串转数组,但是分割点在‘.’ ,需要保留每个后缀的 ‘.’ + 类型 解决: let videoType = '.avi.rmvb.rm.asf.divx.mpg.mpeg.mpe.wmv ...

  7. Python练手例子(16)

    91.时间函数举例1. #!/usr/bin/python #coding=utf-8 import time if __name__ == '__main__': #time.time()返回当前的 ...

  8. LAMP构架搭建论坛

    安装MYSQL数据库服务程序       LAMP动态网站部署架构是一套由Linux+Nginx+MYSQL+PHP组成的动态网站系统解决方案,具有免费.高效.扩展性强且资源消耗低等优良特性.使用手工 ...

  9. ASP.NET Core应用的错误处理[4]:StatusCodePagesMiddleware中间件如何针对响应码呈现错误页面

    StatusCodePagesMiddleware中间件与ExceptionHandlerMiddleware中间件比较类似,它们都是在后续请求处理过程中“出错”的情况下利用一个错误处理器来完成最终的 ...

  10. 1.9 From Native to HTML5

    The mobile technology has become more and more mature, and it has evolved from a ridiculous situatio ...