如何在 .vue 文件中导入类（.js 文件）？

Question

我有一个名为 Authenticator 的类，它在文件 Authenticator.js 中。 我想在我的 vue 应用程序中使用它的功能，特别是在文件 Login.vue 中。

如何导出类 Authenticator 并将其导入 Login.vue？

我收到这些错误：

未捕获的类型错误：无法在补丁 (webpack-internal:///./node_modules/graceful) 中读取未定义的属性“匹配” (webpack-internal:///./node_modules/graceful-fs/polyfills.js:31) -fs/graceful-fs.js:96) 在 Object.eval (webpack-internal:///./node_modules/graceful-fs/graceful-fs.js:88) 在 eval (webpack-internal:///. /node_modules/graceful-fs/graceful-fs.js:348) at Object../node_modules/graceful-fs/graceful-fs.js (chunk-vendors.js:10849) at webpack_require (app.js:785) at fn (app.js:151) at Object.eval (webpack-internal:///./node_modules/gulp-sourcemaps/src/init/index.internals.js:9) at eval (webpack-internal:/// ./node_modules/gulp-sourcemaps/src/init/index.internals.js:124) 在 Object../node_modules/gulp-sourcemaps/src/init/index.internals.js (chunk-vendors.js:11038)

无法加载资源：net::ERR_NETWORK_IO_SUSPENDED

谢谢

Answer 1

 export default class Authenticator {
    // ...
 }

并导入文件：

  import Authenticator from "path/to/file/authenticator.js
  var Auth = new Authenticator ();

Answer 2

如果没有您的代码，很难提供帮助，但这是一个基本示例：

Authenticator.js

'use strict';

class Authenticator {
    // ...
};

module.exports.Authenticator = Authenticator;

登录.vue

<script>
import Authenticator from 'path/to/Authenticator.js';

const AuthenticatorInstance = new Authenticator;

// use it...

</script>

Answer 3

Authenticator.js

class Authenticator {
    //
    };

export default new Authenticator;

登录.vue

<script>
import Authenticator from 'path/Authenticator';
</script>