• • 注：**要查看如何在Vue组件中导入自定义代码（一般情况），请向下滚动最后一个<hr>。

Vue是一个JavaScript框架，因此您可以在其中的任何地方插入普通代码，它将运行得非常好。
恕我直言，你的问题不是关于导入普通代码，而是关于在正确的时间运行它。
您必须在mounted()钩子内运行代码，因为#navigation存在于DOM中：

Vue.config.devtools = false;
Vue.config.productionTip = false;

Vue.component('navigation', {
  template: '#navigationTemplate',
  mounted() {
    window.addEventListener('scroll',
      () => document.querySelector('#navigation')
      .classList.toggle('colored', window.scrollY > 50)
    )
  }
})

new Vue({
  el: '#app'
});

#app {
  min-height: 200vh;
  background: url("https://picsum.photos/id/237/1024/540") no-repeat center center /cover;
}

#navigation {
  background: transparent;
  position: fixed;
  top: 0;
  padding: 1rem;
  transition: 0.3s;
  width: 100%;
  box-sizing: border-box;
  color: white;
}

#navigation.colored {
  background: rgba(255, 255, 255, .85);
  color: black;
}

body {
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script id="navigationTemplate" type="text/template">
  <div id="navigation">
    <nav class="nav-items">
      <a class="item" to="/home">Home</a>
      <a class="item" to="/about">About</a>
      <a class="item" to="/japan">Japan</a>
    </nav>
  </div>
</script>
<div id="app">
  <navigation />
</div>

1.您的scroll.js可以安全地编写为：

window.addEventListener('scroll',
  () => document.querySelector('#navigation')
  .classList.toggle('colored', window.scrollY > 50)
)

1.您的SCSS似乎不正确：

#navigation {
  .colored {
    declaration
  }
}

将把declaration应用于任何具有.colored类的元素，该元素***位于具有navigation的id的元素***内部。但是您的代码在***#navigation上切换类colored***。因此，您的SCSS应如下所示：

#navigation {
  &.colored {
    declaration
  }
}

可能看起来不多，但是&使您的代码适用（或不适用）。
1.您可能希望将transition应用到#navigation，因为它应该在具有colored类***和不具有colored类***时应用。如果不这样做，则返回过渡（从.colored到:not(.colored)）将不会设置动画。
为了记录并回答您最初的问题，将自定义代码导入到Vue组件中的***正确方法***是：
a）将代码导出为函数：
(in滚动. js）

export function menuScroll = function() {
  /* your custom code here */
}

b）进口：
(in您的组件）

import { menuScroll } from 'path/to/scroll'

c）在您需要的地方运行：
(i.e：安装中）

export default {
  name: 'navigation',
  mounted() {
    menuScroll();
  }
}

显然，您希望根据函数的用途/角色以及项目的命名约定来重命名函数。
最后，但并非最不重要的是，如果你的函数需要带参数，你可能想把它作为一个方法来使用：

export function someName = function(...args) {
  /** do stuff with args **/
}

......并且，在组件中：

import { someName } from 'path/to/it'

export default {
  name: 'whatever',
  methods: {
    someName,
    /* more methods... */
  }
}

就这样

<template>
   .... your HTML
</template>

<script>
  export default {
    data: () => ({
      ......data of your component
    }),
    mounted() {
      let recaptchaScript = document.createElement('script')
      recaptchaScript.setAttribute('src', 'https://www.google.com/recaptcha/api.js')
      document.head.appendChild(recaptchaScript)
    },
    methods: {
      ......methods of your component
    }
  }
</script>

来源：Link