Question

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

2020-02-25

200

javascript vue.js import export

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

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

我收到以下错误：

Uncaught TypeError：无法读取未定义的属性“match” at patch (webpack-internal:///./node_modules/graceful-fs/polyfills.js:31) at patch (webpack-internal:///./node_modules/graceful-fs/graceful-fs.js:96) at Object.eval (webpack-internal:///./node_modules/graceful-fs/graceful-fs.js:88) at eval (webpack-internal:///./node_modules/graceful-fs/graceful-fs.js:348) at Object../node_modules/graceful-fs/graceful-fs.js (chunk-vendors.js:10849) 在 webpack_require (app.js:785) 在 fn (app.js:151) 在 Object.eval (webpack-internal:///./node_modules/gulp-sourcemaps/src/init/index.internals.js:9) 在 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;

Login.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;

Login.vue

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