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

Question

I have a class that is called Authenthicator and it is in the file Authenticator.js. I want to use its functions in my vue application, specificaly in the file Login.vue.

How can I export the class Authenticator and import it in Login.vue?

I get these errors:

Uncaught TypeError: Cannot read property 'match' of undefined 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) 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) at Object../node_modules/gulp-sourcemaps/src/init/index.internals.js (chunk-vendors.js:11038)

Failed to load resource: net::ERR_NETWORK_IO_SUSPENDED

Thanks

Answer 1

 export default class Authenticator {
    // ...
 }

And import in file:

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

Answer 2

Pretty hard to help without your code, but here's a basic example:

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>