Vue.js+Webpack引入jQuery及插件实践
本文介绍完成了Vue.js+Webpack+Sass+Jade(pug)网站构建后,引入slick插件的实践步骤。
·
本文介绍完成了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 work
module: {
rules: [{
test: require.resolve('jquery'),
use: [{
loader: 'expose-loader',
options: 'jQuery'
},{
loader: 'expose-loader',
options: '$'
}]
}]
}
尝试这种方式有效。
//It works
module: {
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'
查看完整工程
更多推荐
已为社区贡献5条内容
所有评论(0)