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

Question

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

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

我尝试过的:

将导入添加到我的 Vue 应用程序中的 main.js 文件中。(我通读了此说明，但老实说我并不完全理解发生了什么)

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

在这里找到: https://vuejsdevelopers.com/2017/04/22/vue-js-libraries-plugins/

在开头放置一个 console.log("Test from my webbshop.js") 。 <- 有效

我在 Chrome 中收到此错误:

Uncaught TypeError: Cannot set property 'innerHTML' of null
    at showBasket (webshop.js?709d:146)

保存文档时，我在 VS Code 终端中也收到 21 个错误。 例如。

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;

当我使用 onclick="addToBasket([someparameters])" 创建按钮时，它会抛出错误:

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

我也尝试过:

在 main.js 的最后，只是为了继续工作，在得到答案之前不会陷入困境。

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

它根本不加载文件。但没有错误。

来自 main.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')

它不必具有可扩展性或以其他方式成为最佳解决方案。我只想要一种简单的方法，如何从其他文件导入函数，并让它们在我的 Vue 项目的每个组件中都可以全局访问。

我读到here 我无法想象我必须将 module.exports 放在外部文件中的每个函数中。还是我呢？

You need to export the testFunction before you can require it.

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

期望:

我想访问外部 js 文件中的所有函数，以便在我的应用程序中的其他 component.vue 文件中使用。

实际结果:

浏览器读取外部js文件但功能不起作用。

Answer 1

要向 vue 全局添加函数，您需要扩展 vue 并编写为 plugin
这很容易

link

按照如下方式进行:
创建文件plugin.js

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);
  };
...
}

现在将其导入到主 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 实例。
您只需将其引用到 vue 内部函数即可在任何地方访问它。
在标记中:

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

在 JavaScript 中:

 const b = this.myGlobalMethod();