如何在 CodePen 中使用 DateFNS？（dateFns 未定义）答案

【问题标题】：How to use DateFNS in CodePen? (dateFns is not defined)如何在 CodePen 中使用 DateFNS？（dateFns 未定义）
【发布时间】：2018-12-16 11:06:14
【问题描述】：

我需要在 CodePen 中使用DateFNS，但无法让它工作。错误：

"[Vue 警告]：data() 中的错误：'ReferenceError: dateFns 未定义' （在中找到）”

这是我的 CodePen 示例：https://codepen.io/anon/pen/eKqxmd

    <div id="app">
  <v-app id="inspire">
    <v-layout>
      <v-flex xs12 sm6 offset-sm3>
        <v-card>
          <v-card-title primary-title>
            <div>
              <h3 class="headline mb-0">DATE {{ todaysDateMin }}</h3>
            </div>
          </v-card-title>
        </v-card>
      </v-flex>
    </v-layout>
  </v-app>
</div>

    import { format } from 'date-fns'
new Vue({
  el: '#app',
  data () {
    return {    
      todaysDateMin: dateFns.format(new Date(), '[Today is a] dddd')
    }
  }
})

【问题讨论】：

首先，添加 dateFns 脚本。然后删除您的导入。 codepen.io/Kradek/pen/YvmBrR

标签： javascript vue.js codepen date-fns

【解决方案1】：

在 CodePen 中转到 Settings -> JavaScript 并在 外部资源搜索 中键入 date-fns 并从下拉列表中选择。

然后调用它你需要附加dateFns.，就像你已经在做的那样。

dateFns.format(new Date(), '[Today is a] dddd')

并删除导入语句

【讨论】：

谢谢。如何为其添加国际化？ date-fns.org/v1.29.0/docs/I18n`data () { return { esLocale: 'date-fns/locale/es', todaysDateMin: dateFns.format(new Date(), 'YYYY-MM-DD', {locale: dateFns.esLocale}), `
@Tom 不支持 CDN，非 CommonJS 包。见date-fns.org/v1.29.0/docs/I18n#usage
@Tom 如果你想创建 VueJS 应用程序，我建议使用 CodeSandbox codesandbox.io。您拥有 NPM 的全部功能，并且可以像在本地开发机器中一样安装库。在那里你可以使用国际化并支持 ES 模块
date.formatRelative 怎么是未定义的？

【解决方案2】：

你正在做 import { format } from 'date-fns' 所以你只需要做 format(new Date(), '[Today is a] dddd') 而不是 dateFns.format 因为就像 rror 所说，dateFns 没有定义

【讨论】：