前言
在使用 webpack 作为构建工具, 开发 vue 项目的时候, 难免会用到 jQuery 这种第三方插件 (毕竟都是从用 jQuery 过来的), 那么怎么引用呢? 接下来我来说三种方法.
1 html 模板文件引用法, 这种方法最直接也是我们最熟悉, 直接在项目中的网页模板文件中加入 jQuery 的引用即可
a. 引用
image.PNG
b. 使用
image.PNG
2 expose-loader 引用法
a. 安装 jQuery
NPM i jQuery -D
b. main.JS 中引用 jQuery
- import Vue from 'vue'
- import App from './App'
- import router from './router'
- import $ from 'jquery'// 加入此行
- Vue.config.productionTip = false
- console.warn("==============main.js 输出 $ 对象 ======================");
- console.log($);
- console.log(Windows.$);
image.PNG
说明 此时我们会发现, main.JS 中我们引用了 jQuery,$ 符号我们可以正常使用, 但 Windows.$ 却不能, 而且 helloWorld 这个组件中也引用不到 $; 为什么呢? 因为 webpack 是最后会把代码用闭包的方式打包,$ 对象并没有挂载在 Windows 下, helloWorld 这个组件中并没有引用 jQuery 所以它自然是拿不到的, 那么怎么能做到在 main.JS 中一次引用, 每个组件都能拿到呢?
c. expose-loader 将 jQuery 暴露至全局
1) 安装 expose-loader
- NPM i expose-loader -D
- 2) webpack.config.JS(vue-cli 创建的项目可在 webpack.base.conf.JS)
中配置当引用 jQuery 时使用 expose-loader
- ......
- module: {
- rules: [
- // 增加以下配置即可
- {
- test: require.resolve('jquery'),
- loader: 'expose-loader?$'
- },
- .....
image.PNG
3 webpack 插件法, 给每个模块注入 $
webpack.config.JS(vue-cli 创建的项目可在 webpack.base.conf.JS)
中配置
引用 webpack
const webpack = require('webpack')
配置插件
- plugins:[
- new webpack.ProvidePlugin({
- $: "jquery",
- jQuery: "jquery",
- jQuery: "jquery",
- "window.jQuery": "jquery",
- "window.$": "jquery",
- })
- ]
来源: http://www.jianshu.com/p/e018158940e6