Vue.js+Webpacky引入jQuery及插件实践
2017-08-11 15:38
771 查看
本文介绍完成了Vue.js+Webpack+Sass+Jade(pug)网站构建后,引入slick插件的实践步骤。
由于slick依赖于jQuery,因此要先引入jQuery。
先看一下工程的结构。
注:官方提供的以下方式报错:
尝试这种方式有效。
完成后,我们发现在浏览器的console中,分别输入window.$和window.jQuery已经有值了。表明jQuery已经引入成功。
查看完整工程
由于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'
查看完整工程
相关文章推荐
- vue init webpack-simple 模板中全局引入Jquery正确使用方法 可保jQuery插件正常使用
- Vue+Webpack引入Jquery第三方插件,jQuery is not defined 错误,解决方案
- Vue+Webpack引入Jquery第三方插件,jQuery is not defined 错误,解决方案
- JQuery最佳实践-简单图片导航插件jquery.imgNav.js
- webpack+vue-cli项目中引入外部非模块格式js的方法
- jQuery使用ajaxSubmit()提交表单示例==引入jquery.form.js插件(专门提交表单)
- vue用webpack打包时引入es2015插件
- vue-cli webpack 引入jquery
- 在Web项目中引入Jquery插件报错的完美解决方案(图解)
- Angularjs + Webpack 框架里,引入Bootstrap-datepicker插件时,datepicker is not a function错误的解决方法
- jQuery延迟加载(懒加载)插件 – jquery.lazyload.js-Web前端(W3Cways.com) - Web前端学习之路
- SpringMVC+Hibernate+jQuery+js+css+jsp+nginx整合时,(1)jsp引入js,css无效;(2)插入数据库时某字段为空;(3)web.xml配置完后,从数据库读数
- Vue.js起步实践--不用webpack或vue全家桶情况下开始动手写一个小组件
- webpack如何全局引入jquery和插件?
- 在使用jQuery插件时应避免重复引入jquery.js文件
- Webpack+Vue如何导入Jquery和Jquery的第三方插件
- vue-cli快速构建项目>>>>及引入jquery、jquery插件、this的指向 mounted钩子函数应用
- 怎样在Vue.js中使用jquery插件
- 如何在vue-cli webpack中全局引入jquery
- [译]怎样在Vue.js中使用jquery插件