创建一个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. Thread类和Runnable接口实现多线程--2019-4-18

    1.通过Thread实现 public class TestThread extends Thread{ public TestThread(String name) { super(name); } ...

  2. leetcode刷题六<z字形变换>

    将一个给定字符串根据给定的行数,以从上往下.从左到右进行 Z 字形排列. 比如输入字符串为 时,排列如下: L C I R E T O E S I I G E D H N 之后,你的输出需要从左往右逐 ...

  3. CSS空心圆

    CSS代码:改变border的大小控制空心的大小 div { width: 100px; height: 100px; background: #ffffff; border-radius: 50%; ...

  4. jmeter数据库,charles抓包,Python循环语句

    jmeter数据库,charles抓包,Python循环语句 一.Jemeter数据库 添加jar包数据库 jemeter=>浏览 添加JDBC Connection Configuration ...

  5. Git Log描述乱码问题解决方法

    在git bash 中执行以下命令:git config --global core.quotepath off git config --global --unset i18n.logoutpute ...

  6. Create and test an approval workflow with Microsoft Flow

    https://docs.microsoft.com/zh-cn/flow/getting-started https://docs.microsoft.com/en-us/flow/modern-a ...

  7. 再回首数据结构—数组(Golang实现)

    数组为线性数据结构,通常编程语言都有自带了数组数据类型结构,数组存放的是有个相同数据类型的数据集: 为什么称数组为线性数据结构:因为数组在内存中是连续存储的数据结构,数组中每个元素最多只有左右两个方向 ...

  8. 使用COOKIE实现登录 VS 使用SESSION实现登录

    注:本文使用的代码基于PHP,其他语言逻辑同理. 一:使用COOKIE实现登录验证 使用cookie实现登录的方式,主要通过一些单向的加密信息进行验证.比如admin用户登录了之后,服务端生成一个co ...

  9. 【高并发架构】Redis特点及构件模型

    数据结构 redis 相比 memcached 来说,拥有更多的数据结构,能支持更丰富的数据操作.如果需要缓存能够支持更复杂的结构和操作, redis 会是不错的选择. redis 主要有以下几种数据 ...

  10. 微信小程序学习笔记(一)

    1.新添加页面,找到app.json,在pages中加入写的路径会自动生成文件 2.页面跳转方式,传参数: wx.navigateTo({ url: '../home/home?title=' + a ...