vue-cli 构建项目时引用 jQuery

一、安装 jQuery 依赖

打开终端,进入到项目目录,执行依赖安装:

$ npm install  --save jquery

如果使用的是 Yarn 管理器,则使用下面的方法添加 jQuery 包:

$ sudo yarn add jquery --save

yarn 会生成一个 yarn.lock 的文件,某些情况下需要使用 sudo 目录才可以添加新的包到 package.json 文件中。

二、webpack 配置

通常基于 vue-cli 构建项目时,都会自动生成一个或多个配置文件在工程目录中,如:

  • 基于 webpack 模板的项目配置项为 ./build/webpack.base.conf.js 文件;
  • 基于 webpack-simple 模板的则为 ./webpack.config.js

首先,在头部增加引入 webpack 模块( 适用于 webpack 模板构建的项目,webpack-simple 构建的则已存在该项):

var webpack = require('webpack') // -- 新增的 webpack 模块

然后,在当前配置文件的 module.exports 中增加插件引用(位置无所谓,尽量放在 resolve 对象下方):

resolve: {
  // ·······
},
// 新增插件引用
plugins: [
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery'
  })
],

三、完成

执行完上面的两个步骤后,jQuery 就已经被 webpack 全局引用成功了,在任意组件中添加一个测试代码就可以查看到 jQuery 已经生效!

created: function () {
  console.log( $(document) ); // 输出 [document]
},
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容