在Vue/webpack引入第三方插件jQuery/swiper：简单易行

April 发布于2019-08-20 17:43 / 581人阅读

摘要：写在前面日前，在学习使用开发新的项目。然而目前用实现的框架里面，尚未出现具有像一样统治力的框架。最后这里只举了和的例子，同理其他插件也是可用同样的方法引入。虽以上皆经过实战检验，但若有错误欢迎指正。

写在前面

日前，在学习使用Vue2.0开发新的项目。然而目前用Vue实现的UI框架里面，尚未出现具有像bootstrap一样统治力的框架。一番纠结后，老夫抄起家伙就是一梭...

那么问题来了，在Vue中如何引入jQuery和swiper呢？

经历半天搜索、比对、尝试之后，得出了下面的结论，单用 webpack 时设置同理。

引入jQuery

这个问度娘就有很多方案，我这里选取的是将jQuery暴露到全局的方式，这样就不用每个用到的地方都要import一次

安装 jQuery

npm i -S jQuery //等同于 npm install --save jQuery

设置 webpack.config.js

var webpack = require("webpack")
const ProvidePlugin = new webpack.ProvidePlugin({//引入外部类库
  $: "jquery",
  jQuery: "jquery",
});
module.exports = {
...
plugins: [
    ProvidePlugin,
  ],
...
}

至此，可全局使用熟悉的$符号了。

更多办法

使用 exports-loader（按照官方例子实测，配置简单成谜，然而无效，求指点）

设置 externals（详情参考推荐答案）

普通 import（也就是接下来要说的办法）

引入swiper插件

本来设置externals后再在index.html中引用的办法也是挺好的，但在我的项目中只有一个页面用到，而且externals方式不知如何设置css（还望高人指点），故选择普通import的方式。

vue-awesome-swiper的使用可以参考这篇文章

此法无需在index.html引用其JS或CSS，但每个用到的页面都需要import一次，jQuery也可用此法引入。

简单粗暴import

在 script 中 import 其js文件

import Swiper from "../assets/lib/swiper-3.4.2.min.js"

在 style 中 @import 其css文件

@import "../assets/lib/swiper-3.4.2.min.css";

至此，可以像往常一样使用又爱又恨的swiper了。

最后

这里只举了jq和swiper的例子，同理其他插件也是可用同样的方法引入。虽以上皆经过实战检验，但若有错误欢迎指正。如果对你有帮助，那就点个赞呗。逃。

云服务器 GPU云服务器 web引入jquery插件 linux第三方插件 php 插件目录在哪在js中怎样编写插件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83817.html

如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件

摘要：使用构建的项目，的配置文件是分散在很多地方的，而我们需要修改的是，修改两处的代码在开头引入，后面的那里需要其他代码使用，如果是自行下载的如果使用安装的增加一个其他代码这样就可以正确的使用了，比如我要引入，我们在的入口文件开头加入使用这样就使用vue-cli构建的vue项目，webpack的配置文件是分散在很多地方的，而我们需要修改的是build/webpack.base.conf.j...

niuxiaowei111 2019-08-20 11:19 评论0 收藏0
一字一句的搞懂vue-cli之vue webpack template配置

摘要：神一样的存在。所以呢，就利用两天时间，参考了一些他人的文章，查阅了一些官方的配置，就在此先稍微记录一下。这份配置解析是基于最新版本的。不过，我非常建议，先别看我的文章，自己一句一句的通读一遍。和中的配置含义相似。 webpack--神一样的存在。无论写了多少次，再次相见，仍是初见。有的时候开发vue项目，对尤大的vue-cli感激涕零。但是，但是，但是。。。不是自己的东西，真的很不想折...

atinosun 2019-08-22 11:20 评论0 收藏0
webpack实战

摘要：和类似的预处理器还有等。的用处非常多，包括给自动加前缀使用下一代语法等，目前越来越多的人开始用它，它很可能会成为预处理器的最终赢家。 webpack实战查看所有文档页面：全栈开发，获取更多信息。快马加鞭，加班加点，终于把这个文档整理出来了，顺便深入地学习一番，巩固知识，就是太累人，影响睡眠时间和质量。极客就是想要把事情做到极致，开始了就必须到达终点。原文链接：webpack实战，原...

cyrils 2019-08-22 17:32 评论0 收藏0
我在vue-cli+webpack项目开发中遇到的一些问题总结

摘要：最近用了一个月的时间快速开发了一套管理系统，前后端分离的开发模式，前端采用的技术路线，页面是第三方框架。下面总结一下我在开发工程中遇到的一些问题。比如我需要一个弹框插件，而上页没注册。最近用了一个月的时间快速开发了一套管理系统，前后端分离的开发模式，前端采用vue-cli+webpack的技术路线，页面UI是第三方bootstrap框架。下面总结一下我在开发工程中遇到的一些问题。1....

mykurisu 2019-08-22 13:45 评论0 收藏0