为什么同一目录中的两个类在此Vue.js代码中的导入方式不同？

Question

我正在研究Vue.js项目的代码。

在文件src/model/TextSegment.js中，前两行是：

import UniqueObject from "./UniqueObject";
import { TimeCode } from "@/model";

文件UniqueObject.js是同一目录中的类文件，因此我理解./只是意味着同一个目录并加载此文件以便在TextSegment.js中使用类。

但是文件TimeCode.js也是同一目录中的一个类，虽然它是一个实例化的类，但我希望它用相同的语法加载，例如：

import TimeCode from "./TimeCode";

1. 为什么TimeCode在波浪形的括号中？
2. 为什么它有@而不是.作为目录？

的src /模型/ UniqueObject.js

import uuidv4 from "uuid/v4";

class UniqueObject {
  constructor(initial = {}) {
    if (this.constructor == UniqueObject) {
      throw TypeError("Cannot instantiate abstract class UniqueObject");
    }
    this.uuid = initial.uuid || uuidv4();
  }
}

export default UniqueObject;

的src /模型/ TimeCode.js

class TimeCode {
  constructor(initials = {}) {
    this.seconds = initials.seconds || null;
    this.frame = initials.frame || null;
  }
}

export default TimeCode;

的src /模型/ TextSegment.js

import UniqueObject from "./UniqueObject";
import { TimeCode } from "@/model";

class TextSegment extends UniqueObject {
  constructor(initials = {}) {
    super(initials);
    this.content = initials.content || "";
    this.translation = initials.translation || "";
    this.notes = initials.notes || "";
    this.timecode_start = new TimeCode(initials.timecode_start || {});
    this.timecode_end = new TimeCode(initials.timecode_end || {});
    this.voice_id = initials.voice_id || null;
    this.filename = initials.filename || "";
  }
}

export default TextSegment;

Answer 1

在JavaScript中有几种导入方式。这是最常见的两种。

WITH导入默认导出变量。如果您打开 UniqueObject 文件，您很可能会看到类似import UniqueObject from "./UniqueObject";的内容。

export default <var>在 @ / model 的文件中导入import { TimeCode } from "@/model";变量。如果您打开模型文件，您会看到TimeCode。

之类的内容

export const TimeCode与您的模块加载器有关，取决于您使用的模块加载器。