vue 引入 静态jquery插件有问题
有个需求,需要把一个由jquery和bootstrap组成的静态页引入到vue页面中,现在把jquery和bootstrap已经引入进入了
相关插件有这些
<!-- jquery latest version -->
<script src="../js/vendor/jquery-1.12.4.min.js"></script>
<!-- bootstrap js -->
<script src="../js/bootstrap.min.js"></script>
<!-- owl.carousel js -->
<script src="../js/owl.carousel.min.js"></script>
<!-- Counter js -->
<script src="../js/jquery.counterup.min.js"></script>
<!-- waypoint js -->
<script src="../js/waypoints.js"></script>
<!-- magnific js -->
<script src="../js/magnific.min.js"></script>
<!-- wow js -->
<script src="../js/wow.min.js"></script>
<!-- meanmenu js -->
<script src="../js/jquery.meanmenu.js"></script>
<!-- Form validator js -->
<script src="../js/form-validator.min.js"></script>
<!-- plugins js -->
<script src="../js/plugins.js"></script>
<!-- main js -->
<script src="../js/main.js"></script>
这些都是静态的js文件
我引入jquery的方式
因为直接使用npm安装的jquery包,会提示我jquery版本过低,所以就引入的静态jquery包
在webpack.base.conf.js中配置
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
jquery:path.resolve(__dirname,'../src/js/vendor/jquery-1.12.4.min'),
}
},
plugins: [
new webpack.ProvidePlugin({
$:"jquery",
jQuery:"jquery",
jquery: "jquery",
"windows.jQuery":"jquery"
})
],
我现在输出jquery可以直接输出,但是输出插件包都是undefined
直接引入的问题
import carousel from "../js/owl.carousel.min.js"
import counterup from "../js/jquery.counterup.min.js"
import waypoint from "../js/waypoints.js"
import magnific from "../js/magnific.min.js"
import wow from "../js/wow.min.js"
import meanmenu from "../js/jquery.meanmenu.js"
import validator from "../js/form-validator.min.js"
import plugins from "../js/plugins.js"
import main from "../js/main.js"
import modernizr from "../js/vendor/modernizr-2.8.3.min.js"
会有这样的问题
也尝试了使用imports-loader
import 'import-loader?this=>window!./js/owl.carousel.min.js'
抛出这样的错误
ERROR Failed to compile with 1 errors 10:11:48 AM
This dependency was not found:
* exports?window.Zepto!../js/owl.carousel.min in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/gmpage/mainPage.vue
To install it, you can run: npm install --save exports?window.Zepto!../js/owl.carousel.min
或许我使用方式不对?
请教大家应该如何解决引入插件包的问题,麻烦大神解答一下
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
把这些, 直接写在index.html里面