webpack构建VUE项目使用jquery及其插件 expose-loader
2017-08-17 09:09
1676 查看
闲来无事先写一篇博客,整合一下最近网上更新的资源,在用webpack构建VUE项目时会遇到仍旧想用jquery以及依赖jQuery的插件,但是引入jq会很麻烦,这里介绍一种比较简单使用的方法,使用expose-loader
先简单介绍一下引入jq的两种别的做法,第一种是用Npm下载jquery依赖,然后在webpack.config.js也就是配置文件中声明$为全局变量,然后import或者require进去(具体做法自行百度,这种做法很常见也很多,这里就不详细介绍了),但是这种做法对于插件引入还是不太友好的,第二种做法是直接在index.html中使用script以一个绝对路径引入jquery.min.js,这种做法我没试过,不知道要不要声明全局变量。下面就开始使用expose-loader来引入jq及其插件
首先
npm install jquery expose-loader --save
我们先下载jq和expose-loader
然后我们去配置webpack.config.js(注意:这个文件是通过vue-cli后以webpack-simple所生成的,如果单纯使用webpack模板的话,那就要去找一个叫webpack.conf的文件了,那个才是配置这个的文件,忘记具体叫啥了= =)
module: { loaders: [ { test: require.resolve('jquery'), loader: 'expose-loader?jQuery!expose-loader?$' }, { test: /\.vue$/, loader: 'vue-loader' }, { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }, { test: /\.css$/, loader: 'style-loader!css-loader' }, { test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/, loader: 'file-loader' }, { test: /\.(png|jpg|gif|svg)$/, loader: 'file-loader', options: { name: '[name].[ext]?[hash]' } } ] },
把关于jquery和expose-loader的配置放在所有的Loader之前,也就是第一个加载。
最后,去想引入插件的页面加入如下代码
import $ from 'expose-loader?$!jquery' import 'jquery.easing' //插件可用
在vue组件中的script的最上方,也就是export default上面,加入这两行代码,注意这里用的是es6的语法,没有bable的童鞋请用require引入,不过用vue-cli生成的项目应该支持es6了吧= =
当然题主这里以jquery.easing为例,如果是在npm中找不到的依赖,是一个相对冷门的插件,请用绝对路径引入
最后说一句,expose-loader的写法已经有了更新,之前的写法是
{ test: require.resolve('jquery'), loader: 'expose?jQuery!expose?$' },
import $ from 'expose?$!jquery' import 'jquery.easing' //插件可用
在用了最新版的webpack2.0和expose-loader之后,记得在原有代码上加上-loader,不然会失效
相关文章推荐
- vue init webpack-simple 模板中全局引入Jquery正确使用方法 可保jQuery插件正常使用
- Vue系列——在vue项目中使用jQuery及其第三方插件
- 使用webpack构建vue-cli项目,写scss脚本语言报错
- windows/mac 使用webpack构建vue项目
- webpack+vue 构建项目步骤并且使用sass 安装配置
- 使用vue-cil构建vue2项目,webpack打包项目
- vue项目使用webpack loader把px转换为rem
- webpack:使用expose-loader 解决第三方库的插件依赖问题
- webpack---使用插件,常见webpack的plugin,构建vue,react单页面/多页面工程APP必备插件
- 【webpack】expose-loader 插件使用
- vuex在vue-cli和webpack构建的项目中的简单使用
- 使用VUE2.0构建webpack项目
- 如何在vue-cli+webpack构建的项目引入jquery和bootstrap
- Webpack+Vue如何导入Jquery和Jquery的第三方插件
- vue学习笔记(一)使用npm,webpack,vue-cli搭建vue项目
- Webpack + vue-loader构建单文件vue组件
- 用Webpack构建Vue项目
- vue2.0新手发车(一):使用webpack构建项目
- 使用vue-lazyload解决Vue+Webpack项目的图片加载问题
- 使用webstorm+webpack构建简单入门级“HelloWorld”的应用&&引用jquery来实现alert