vue-cli 构建项目时引用 jQuery

2017-06-17  本文已影响174人  djyuning

一、安装 jQuery 依赖

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

$ npm install  --save jquery

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

$ sudo yarn add jquery --save

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

二、webpack 配置

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

首先,在头部增加引入 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]
},
上一篇下一篇

猜你喜欢

热点阅读