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]
},