一、安装 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]
},
网友评论