导入外部javascript文件并在vue应用程序中全局使用函数

我正在使用Vue.js cli 3构建模拟WebShop进行练习。我得到了一个javascript文件，其中包含按钮、购物篮和结帐的所有功能

而不是将所有代码复制到我自己的vue应用程序中。如何导入Javascript文件而不出错

我所尝试的： 将导入添加到我的Vue应用程序的main.js文件中。我仔细阅读了此说明，但我真的不完全理解发生了什么

可在此处找到：

---

从我的webbshop.js开始放一个console.logTest 要向vue全局添加函数，需要扩展vue并以插件形式编写 这很容易

作为休耕地： 创建文件plugin.js

现在将其导入主Vue文件

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import plugin from './plugin'

Vue.config.productionTip = false

Vue.use(plugin)

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

之后，将自定义方法附加到所有vue实例。 您可以在任何地方访问它，只需将其引用到vue内部函数即可。 在标记中：

<h1 v-text="mySecondGlobalMethod(1,2,3)"></h1>

---

其中一些错误似乎是由eslint报告的，例如i已经定义。你应该修复它们。如果我理解正确，我需要将我的webbshop.js文件导入到插件中，并在插件中声明所有函数作为方法，使用：``Vue.myGlobalMethod=function{webshop.dothis；}；```````所以我抓取所有函数，并调用它们一些新的或相同的东西，但作为Vue的方法。{newGlobalMethod}。为了调用它，我在标记中也一样正常吗？比如“买？我已经试过好几次了。”。甚至完全用只包含函数myFunction{console.log'test}的虚拟test.js文件替换我自己的webshop.js文件，没有任何效果，它实际上使我的应用程序崩溃。我复制并粘贴了您建议的所有代码，并在Vuejs.org上进行了尝试

error: 'i' is already defined (no-redeclare) at src/assets/lib/js/webbshop.js:105:18:
  103 | 
  104 |         // Loopa genom varor
> 105 |         for (var i = 0; i < basketItems.length; i++) {
      |                  ^
  106 |             // Räkna ut kostnad och lägg till summa
  107 |             var itemCost = parseInt(basketItems[i].artCost);
  108 | 

error: 'addToBasket' is defined but never used (no-unused-vars) at src/assets/lib/js/webbshop.js:31:10:
  29 | 
  30 | /* Lägg till i varukorg */
> 31 | function addToBasket(el, id, name, cost, image, notify = false) {
     |          ^
  32 | 
  33 |     // Börja med en vara
  34 |     numOfItems = 1;

Uncaught ReferenceError: addToBasket is not defined
    at HTMLButtonElement.onclick ((index):16)

function loadjsfile(filename){
        var fileref=document.createElement('script')
        fileref.setAttribute("type","text/javascript")
        fileref.setAttribute("src", filename)
}
 
loadjsfile("@/assets/lib/js/webbshop.js")

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import webbshop from '@/assets/lib/js/webbshop.js';
Object.defineProperty(Vue.prototype, '$webbshop', { value: webbshop });

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

module.exports = function testFunction() {
  // function code
}

import webbshop from '@/assets/lib/js/webbshop.js';

// MyPlugin its just a name change to whatever meet you needs.
MyPlugin.install = function (Vue, options) {
  Vue.myGlobalMethod = function () {
    webshop.dothis();
  };

  Vue.mySecondGlobalMethod = function (a,b,c) {
    webshop.dothis(a,b,c);
  };
...
}

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import plugin from './plugin'

Vue.config.productionTip = false

Vue.use(plugin)

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

<h1 v-text="mySecondGlobalMethod(1,2,3)"></h1>

 const b = this.myGlobalMethod();