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([some parameters])"创建按钮时，会引发错误：

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 。还是我？

您需要先导出testFunction，然后才能使用它。
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();

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

我尝试过的事情：

我也尝试过：

来自main.js

期望：

实际结果：

1 个答案: