Vue.js+Webpacky引入jQuery及插件实践

本文介绍完成了Vue.js+Webpack+Sass+Jade(pug)网站构建后，引入slick插件的实践步骤。

由于slick依赖于jQuery，因此要先引入jQuery。

先看一下工程的结构。

1. 使用expose-loader引入jQuery

按照官方提供的步骤，引用全局的jQuery，识别$和jQuery变量。

（1）安装

注：此处的i是install的简写

npm i expose-loader --save

npm i jQuery --save

（2）在main.js中引入

import 'expose-loader?$!jquery'

（3）修改配置文件

修改在build文件夹下的webpack.base.conf.js文件。
注：官方提供的以下方式报错:

//Doesn't workmodule: {  rules: [{          test: require.resolve('jquery'),          use: [{              loader: 'expose-loader',              options: 'jQuery'          },{              loader: 'expose-loader',              options: '$'          }]      }]}

尝试这种方式有效。

//It worksmodule: {    rules: [      {        test: require.resolve('jquery'),        loader: 'expose-loader?jQuery!expose-loader?$'      },    ]}

---

完成后，我们发现在浏览器的console中，分别输入window.$和window.jQuery已经有值了。表明jQuery已经引入成功。

2. 引入slick

在main.js中引入slick，请正确书写路径。

import './lib/slick.js'

---

查看完整工程