在 vue 组件中加载外部 JS 文件

Question

我试图在我的 .vue 文件中使用外部 js 文件，但出现错误：

[Vue warn]: Method "solarSystemAnimations" has type "object" in the component definition. Did you reference the function correctly?

found in

---> <SolarSystem> at src/views/SolarSystem.vue
       <App> at src/App.vue
         <Root>

我在 /src/assets/js/solarSystemAnimations:

有外部 js 文件

export default $(window).load(function() {
  var body = $("body"),
    universe = $("#universe"),
    solarsys = $("#solar-system")

   ...
 };

我的 .vue 文件如下所示：

<template>
  <div class="solarSystem" @load="solarSystemAnimations">
    <div class="opening hide-UI view-2D zoom-large data-close controls-close">
....
</template>

<script>
import solarSystemAnimations from "@/assets/js/solarSystemAnimations.js";

export default {
  name: "SolarSystem",
  methods: {
    solarSystemAnimations: solarSystemAnimations
  }
};
</script>

我浏览了很多帖子，但似乎对我的情况没有任何帮助。提前感谢任何帮助。

Answer 1

在 Vue 中，您通常使用生命周期挂钩在 DOM 加载的特定阶段调用函数。由于您正在引用 window 负载，因此 Vue 等效项将是一个已安装的挂钩。你可以在 Vue 组件中这样重构（没有外部文件）：

methods: {
functionBlah () {
      const body = document.getElementsByTagName("BODY")[0],
        universe = document.getElementById("#universe"),
        solarsys = document.getElementById("#solar-system")
       ...
     }
},

mounted() {
this.functionBlah();
}

在 vue 组件中加载外部 JS 文件

Loading external JS file within a vue component

webpack

vue-loader

vuejs2