將Native JavaScript文件導入Vue組件-Vue Js

Question

我用 Vue Js 創建了前端應用程序。 我想將一個原生 javascript 文件集成到 Vue 組件中。

本機 js 文件包含多個 util 函數。 我想從我的 Vue 組件中調用這些函數。

原生 js 文件 util.js

var helper = function(t) {
                var u = 'product',
                    A = 'version',
                return {
                    buildHelpUrl: function(a, b, c) {
                                   return "http://"
                                 }
               /* Snippets */
             }

我嘗試了以下方式將我的原生 js 文件導入到.vue 文件中

Case 1: import OTHHUrlBuilder from '@/util.js';
Case 2: import * as urlbulider from '@/util.js';

沒有任何效果。 請幫助我正確導入和使用本機 js 文件中可用的功能。

Answer 1

首先將你需要的所有函數導出到你的 .vue 文件中。

your.js 文件中的示例：

  const funcAdd = (a, b) =>  {
   return (a + b)
  }

  const funcSub = (a, b) =>  {
    return (a - b)
  }

  export { funcAdd , funcSub }

然后在 your.vue 文件中，您可以導入所有導出的函數。

在你的 .vue 文件上：

  <script>

  import { funcAdd , funcSub } from '@util.js'

 ...

如果你只有一個 function function，可以使用export default

在你的 .js 文件上

const helper = (t) => {
          var u = 'product',
                    A = 'version',
                return {
                    buildHelpUrl: function(a, b, c) {
                                   return "http://"
                                 }
               /* Snippets */
             }

    export default helper

在 your.vue 文件上

    import helper from '@/util.js'