【问题标题】：How to import and use luxon in a vuejs project?如何在 vuejs 项目中导入和使用 luxon？
【发布时间】：2019-11-29 09:52:15
【问题描述】：

当我尝试在 vuejs2 项目中使用 luxon 时遇到此错误。

Uncaught TypeError: Cannot read property 'local' of undefined

我使用 npm 安装了 lib，并在我的组件中导入：

import DateTime from 'luxon'
const exmpl = DateTime.local()

你们能否告诉我我做错了什么，或者甚至提出一个可以轻松使用 vuejs 进行时间操纵的其他库。

【问题讨论】：

moment.github.io/luxon 建议import { DateTime } from 'luxon'，带大括号。

标签： javascript datetime vuejs2 luxon

【解决方案1】：

因为DateTime 没有正确导入。

import { DateTime } from 'luxon'

【讨论】：

你能解释一下带大括号和不带大括号的导入有什么区别吗？
我在下面添加了importing modules in ES6 的回复。请参考。
我认为更简单的解释方法是 Luxon 导出了一个像 { DateTime: ..., Interval: ..., Duration: ...} 的对象（参见 here），因此您的无括号导入会将整个对象分配给 DateTime。大括号解构该对象，将对象中的 DateTime 值分配给代码中的 DateTime 变量

【解决方案2】：

导入

我想用一般的 ES6 语法来解释一下。

让我们导入那些非常有用的辅助函数：

import { sayName, sayAnimal } from './Helpers';
import whatsYourFlava from './Helpers';
sayName('Sam');
//Hello Sam
sayAnimal('Giraffe');
//What animal? Giraffe
whatsYourFlava('grapes');
//I'm liking grapes

导入命名导出时，您必须将它们用大括号括起来。如果您从同一个模块导入多个导出，您可以将它们连接起来，以逗号为基础，并在相同的环绕花括号。这看起来很像 ES6 中的解构，但实际上与它没有任何关系。

当您导入并省略花括号时，它将在您导入的模块中查找默认导出。因为它知道它必须查找默认导出，所以您可以使用任何随机名称进行导入。这也可以：

import bruhGetMoney from './Helpers';
bruhGetMoney('money');
//I'm liking money

我希望这对你来说会更清楚。谢谢。

【讨论】：