如何将单独的JS文件包含到我的Vue组件中？

Question

我想在我的Vue组件中包含一个单独的JS文件，但我无法弄清楚。经过一番谷歌搜索后，我尝试了以下方法：

<script>
export default {
  import * as Menu from './../assets/menu/Menu.js'
}
</script>

这：

<script>
export default {
  const Menu = require('./../assets/menu/Menu.js');
}
</script>

这：

<script>
export * from './../assets/menu/Menu.js'
</script>

一切都没有成功。我只想将Menu javascript文件加载到Header.vue组件中。

我正在使用这些依赖项：

{
  "name": "django-vue",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "postinstall": "yarn build"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "bootstrap": "^4.3.1",
    "bootstrap-vue": "^2.0.0-rc.13",
    "js-cookie": "^2.2.0",
    "vue": "^2.6.6",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.0.0-rc.12",
    "@vue/cli-plugin-eslint": "^3.0.0-rc.12",
    "@vue/cli-service": "^3.0.0-rc.12",
    "vue-template-compiler": "^2.6.6"
  },
  "babel": {
    "presets": [
      "@vue/app"
    ]
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

我是Vue的新手，所以有人可以帮我吗？

编辑：

Header.vue组件：

<template>
  <div id="app">
        <link href="https://fonts.googleapis.com/css?family=Roboto|Poppins" rel="stylesheet">
        <meta name="viewport" content="width=device-width">
        <header>
            <div class="wrap">
                <div id="hamburger" v-on:click="display_menu()">
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
                <img src="https://humancoders-formations.s3.amazonaws.com/uploads/course/logo/104/thumb_bigger_formation-vue-js.png" alt="logo">
                <nav id="menu">
                    <li><a>Menu 1</a></li>
                    <li class="drop"><a v-on:click="display_drop_menu()">Menu 2 dropdown <i class="icon-arrow"></i></a>
                        <ul class="drop_menu">
                            <a>Sub menu 1</a>
                            <a>Sub menu 2</a>
                            <a>Sub menu 3</a>
                        </ul>
                    </li>
                    <li class="drop"><a v-on:click="display_drop_menu()">Menu 3 dropdown  <i class="icon-arrow"></i></a>
                        <ul class="drop_menu">
                            <a>Sub menu 1</a>
                            <a>Sub menu 2</a>
                            <a>Sub menu 3</a>
                        </ul>
                    </li>
                    <li><a>Menu 4</a></li>
                </nav>
            </div>
        </header>
        <div id="loader" v-if="load">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div id="overlay" v-if="load"></div>
        <div id="background">
            <h3>This menu is responsive, resized on.</h3>
            <h3>The header is hide when scroll down and show when scroll up, try it !</h3>
            <button v-on:click="loaded()">Click here for loader!</button></button>
        </div>
    </div>

</template>

<script>
export * from './../assets/menu/Menu.js'
</script>

  <style scoped lang="scss">
    @import './../assets/menu/menu.scss';
  </style>

Menu.js文件：

window.addEventListener("resize", function(event) {
    close_all_menu();
    document.getElementsByTagName("body")[0].classList.remove("display_menu");
});
var last_scroll = 0;
window.onscroll = function() {
    if(!document.getElementById("loader")){
        close_all_menu();
        var header = document.getElementsByTagName("header")[0];
        if(Math.abs(last_scroll - this.scrollY) <= 5) return;
        (this.scrollY < last_scroll) ? header.style.top = "0" : header.style.top = "-" + header.clientHeight + "px" ;
        last_scroll = this.scrollY;
    }
}
var app = new Vue({
  el: '#app',
  data: {
            load : false,
    },
    methods: {
        display_menu : function(){
            var body = document.getElementsByTagName("body")[0];
            (!body.classList.contains("display_menu")) ? body.classList.add("display_menu") : body.classList.remove("display_menu");
        },
        display_drop_menu : function(){
            var drop_menu = event.target.parentElement.getElementsByClassName("drop_menu")[0];
            var drop_menus = document.getElementsByClassName("drop_menu");

            Array.from(drop_menus).forEach(function(e){
                if(e != drop_menu){
                    e.classList.remove("display");
                }
            });
            var lis = document.getElementById("menu").getElementsByTagName("li");
            Array.from(lis).forEach(function(e){
                e.style.marginTop = 0;
            });
            (!drop_menu.classList.contains("display")) ? drop_menu.classList.add("display") : drop_menu.classList.remove("display");
            if(window.innerWidth < 660 && drop_menu.classList.contains("display")) {
                event.target.parentElement.nextSibling.nextSibling.style.marginTop = drop_menu.clientHeight + "px";
            }
        },
        loaded : function(){
            document.getElementsByTagName("body")[0].style.overflowY = "hidden";
      console.log('t');
            (this.load) ? this.load = false : this.load = true;
        }
    }
});
function close_all_menu() {
    var lis = document.getElementById("menu").getElementsByTagName("li");
    Array.from(lis).forEach(function(e){
        e.style.marginTop = 0;
    });
    var drop_menus = document.getElementsByClassName("drop_menu");
    Array.from(drop_menus).forEach(function(e){
        e.classList.remove("display");
    });
}