javascript - vue-cli构建的单页应用如何引入第三方插件
本文介绍了javascript - vue-cli构建的单页应用如何引入第三方插件的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
在一个Vue Component 引入如下:
<script>
import '../global/css/bootstrap.min-v2.2.0.css'
import '../global/css/bootstrap-extend.min-v2.2.0.css'
import '../assets/css/site.min-v2.2.0.css'
import '../global/css/skintools.min-v2.2.0.css'
import '../assets/examples/css/pages/login-v3.min-v2.2.0.css'
import '../global/vendor/jquery/jquery.min.js'
import '../global/vendor/bootstrap/bootstrap.min.js'
import '../global/vendor/animsition/animsition.min.js'
import '../global/vendor/asscroll/jquery-asScroll.min.js'
import '../global/vendor/mousewheel/jquery.mousewheel.min.js'
import '../global/vendor/asscrollable/jquery.asScrollable.all.min.js'
import '../global/vendor/ashoverscroll/jquery-asHoverScroll.min.js'
import '../global/vendor/switchery/switchery.min.js'
import '../global/vendor/intro-js/intro.min.js'
import '../global/vendor/screenfull/screenfull.min.js'
import '../global/vendor/slidepanel/jquery-slidePanel.min.js'
export default{
name: 'login'
}
</script>
运行npm run dev后再浏览器的console里报错:
于是我npm install jquery bootstrap --save 在main.js用如下代码引入:
var $ = require('jquery')
window.jquery = window.$ = $
但是还是不行!
求大神带路!
解决方案
你的一大堆的‘jquery-xxx.js’都依赖jquery,要解决第三方js对jquery的依赖,import jQuery from 'jquery'
是不够的,它只是解决了你自己的代码对jquery的依赖。
一种方法是用imports-loader这个插件
比如你原来import './jquery-slidePanel.min.js'
改成import 'imports?jQuery=jquery!./jquery-slidePanel.min.js'
;
我个人喜欢用 webpack.ProvidePlugin
plugins: [
//provide $, jQuery and window.jQuery to every script
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
})
]
https://zhuanlan.zhihu.com/p/...
这篇关于javascript - vue-cli构建的单页应用如何引入第三方插件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文