2017-08-16 73 views
0

我被要求将新的html页面添加到项目中。此页面已经完全开发,基于和一些功能。将自举功能包含到自定义vuejs组件中

我创建了一个新组件。

newPage.vue

<template> 
    <div id="my-new-page"> 
     ... 
    </div> 
</template> 

<style src="path/to/_bootstrap.scss" lang="scss" scoped></style> 
<style src="path/to/font-awesome.scss" lang="scss" scoped></style> 
<style src="path/to/animate.css" scoped></style> 
<style src="path/to/custom/css.css" scoped></style> 


<script src="path/to/custom/js.js"></script> 

js.js

import jQuery from 'jquery'; 
    // Same error even with window.$ = window.jQuery = jQuery; 
    import collapse from 'path/to/bootstrap/feature/collapse.js"; 

    export default { 
     created() { 
      runjQuery(jQuery); 
     }, 
    }; 

    function runjQuery($) { 
     // here is how I thought integrate the jquery script of the new html page 
     $(function() { 
      .... 
      $('#navbar').collapse('hide'); 
     }); 
    } 

但是,这显然是行不通的,因为collapse.js无法访问jQuery,我得到这个错误

Uncaught ReferenceError: jQuery is not defined 

我该如何解决这个问题?

鉴于我不想(如果可能)将bootstrap和jquery全局添加到我的项目中,因为这肯定会在我的其他组件中出现断点续传吗?

+0

你看过vue-strap吗? https://wffranco.github.io/vue-strap/ – enriqg9

+0

@ enriqg9有没有我需要的所有功能,例如崩溃 – smarber

+0

我怀疑你需要括号形式的'import'。请参阅https://stackoverflow.com/a/43546877/392102 –

回答

0

我想通了,require作品,而import没有。

// Declare $ and jQuery globally into my whole app :(
window.$ = window.jQuery = jQuery; 
// this does not work 
// import collapse from 'path/to/bootstrap/feature/collapse.js"; 
require('path/to/bootstrap/feature/collapse.js'); 
0
  1. 确认jQuery尚未加载。加载两次可能会导致一些问题。删除你的jQuery导入,也许登录console.log($),如果他们已经建立在jQuery上的机会,它已经在那里。
  2. 如果1.失败,则必须在您的主js文件中导入jQuery或将其全局导入。