Vue.js 在vue实例内调用外部javascript函数

下面是我从vue实例调用的一组外部javascript函数

// debounce
function debounce(func, wait, immediate) {

    let timeout;

    return function() {
        let context = this, args = arguments;
         later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };

        let callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
}
// -- end debounce

// animate css
function animateCss(element, animationName, callback) {
    const node = document.querySelector(element)
    node.classList.add('animated', animationName)

    function handleAnimationEnd() {
        node.classList.remove('animated', animationName)
        node.removeEventListener('animationend', handleAnimationEnd)

        if (typeof callback === 'function') callback()
    }

    node.addEventListener('animationend', handleAnimationEnd);
}
// -- end animate css

new Vue({
    el : '#app',
    template : '#search-tpl',
    methods : {
        onKeyDown : debounce(function(){
             animateCss('#searchboxui-wrapper', 'fadeOutDown',function(){
                document.querySelector('#searchboxui-wrapper').style.display = 'none';  
            });
        }
    }
})

还有我的vue实例

// debounce
function debounce(func, wait, immediate) {

    let timeout;

    return function() {
        let context = this, args = arguments;
         later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };

        let callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
}
// -- end debounce

// animate css
function animateCss(element, animationName, callback) {
    const node = document.querySelector(element)
    node.classList.add('animated', animationName)

    function handleAnimationEnd() {
        node.classList.remove('animated', animationName)
        node.removeEventListener('animationend', handleAnimationEnd)

        if (typeof callback === 'function') callback()
    }

    node.addEventListener('animationend', handleAnimationEnd);
}
// -- end animate css

new Vue({
    el : '#app',
    template : '#search-tpl',
    methods : {
        onKeyDown : debounce(function(){
             animateCss('#searchboxui-wrapper', 'fadeOutDown',function(){
                document.querySelector('#searchboxui-wrapper').style.display = 'none';  
            });
        }
    }
})

但是它总是让我

未定义

，即使我声明了包或socketio包，它也会让我

未定义

，有什么帮助吗

PS：我正在使用Vue CLI 3

---

创建外部js文件，例如

externals.js

，使用导入从该文件导入所有内容或特定函数，并在Vue代码中使用它们：

externals.js中的内容：

    // debounce
    function debounce(func, wait, immediate) {

        let timeout;

        return function() {
            let context = this, args = arguments;
            later = function() {
                timeout = null;
                if (!immediate) func.apply(context, args);
            };

            let callNow = immediate && !timeout;
            clearTimeout(timeout);
            timeout = setTimeout(later, wait);
            if (callNow) func.apply(context, args);
        };
    }
    // -- end debounce

    // animate css
    function animateCss(element, animationName, callback) {
        const node = document.querySelector(element)
        node.classList.add('animated', animationName)

        function handleAnimationEnd() {
            node.classList.remove('animated', animationName)
            node.removeEventListener('animationend', handleAnimationEnd)

            if (typeof callback === 'function') callback()
        }

        node.addEventListener('animationend', handleAnimationEnd);
    }
    // -- end animate css
export {debounce, animateCss}

VueJS中的内容：

import {debounce, animateCss} from '../../js/externals.js'

new Vue({
    el : '#app',
    template : '#search-tpl',
    methods : {
        onKeyDown(){
            debounce(function(){
                animateCss('#searchboxui-wrapper', 'fadeOutDown',function(){
                    document.querySelector('#searchboxui-wrapper').style.display = 'none';
                });
            });
        }
    }
})

---

如何导入要在

Search.vue

中使用的内容？您是在使用webpack或任何其他构建过程，还是直接将vue.js包含到.html页面中？（如果您使用的是.vue文件，则只需导入每个组件正在使用的任何外部库，以便webpack知道包含它们）。你能展示一下你当前试图“声明axios软件包”的代码吗？@DanielBeck webpack，我在vue cliAh上，这可能就是问题所在。您需要在使用导入代码的vue文件中声明导入，而不是在app.vue中。您的外部文件是否导出功能@niklaz下面的回答正好说明了这应该如何工作。如果这似乎无法解决问题，请在问题中显示导入/导出代码，很难根据描述进行调试。@JuliverGalleto，您能用更正后的示例更新问题吗？它应该是有效的。如果它不工作，那么其他原因就是错误的原因