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屋！