如何在CodePen中使用DateFNS?(dateFns 未定义)

Tom*_*Tom 3 javascript vue.js codepen date-fns

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

“[Vue warn]:data() 中的错误:'ReferenceError:dateFns 未定义'(在 <Root> 中找到)”

这是我的示例 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')
    }
  }
})
Run Code Online (Sandbox Code Playgroud)

esa*_*lva 5

在 CodePen 中,转至Settings -> JavaScript外部资源搜索类型date-fns并从下拉列表中进行选择。

然后要调用它,您需要追加dateFns.,就像您已经在做的那样。

dateFns.format(new Date(), '[Today is a] dddd')
Run Code Online (Sandbox Code Playgroud)

并删除导入语句

  • @Tom 如果你想创建 VueJS 应用程序,我建议使用 CodeSandbox https://codesandbox.io/ 。您拥有 NPM 的全部功能,并且可以像在本地开发计算机中一样安装库。在那里您可以使用国际化并支持 ES 模块 (2认同)