如何使用 Typescript 在 Codepen 中制作 Vuetify 组件？

Question

我在公司项目中使用了nuxt.js。我真的很想轻松测试， 所以我决定注册Codepen Pro。 我只想在 codepen 中显示v-data-table 组件，但它不起作用。

我的代码只是提到了Vuetify 网站。我在codepen中选择了Typescript、Vue和Vuetify并保存了。

我一直在寻找尝试制作相同组件的人，但我找不到.....

有谁知道如何在 codepen 中编写Vuetify 代码？

我的代码如下↓

html    
<div id=app>
<template>
  <v-data-table :headers="headers" :items="desserts" :items-per-page="5" class="elevation-1"></v-data-table>
</template>
</div>




 Typescript
new Vue ({
  el=#app
  headers = [
    {
      text: "Dessert (100g serving)",
      align: "start",
      sortable: false,
      value: "name"
    },
    { text: "Calories", value: "calories" },
    { text: "Fat (g)", value: "fat" },
    { text: "Carbs (g)", value: "carbs" },
    { text: "Protein (g)", value: "protein" },
    { text: "Iron (%)", value: "iron" }
  ];
  desserts = [
    {
      name: "Frozen Yogurt",
      calories: 159,
      fat: 6.0,
      carbs: 24,
      protein: 4.0,
      iron: "1%"
    },
    {
      name: "Ice cream sandwich",
      calories: 237,
      fat: 9.0,
      carbs: 37,
      protein: 4.3,
      iron: "1%"
    }
  ];
})

Answer 1

您的代码存在一些问题。 首先，您应该返回如下数据：

new Vue({
  el: '#app',
  data () {
    return {
      headers: [
        {
          text: "Dessert (100g serving)",
          align: "start",
          sortable: false,
          value: "name"
        },
        { text: "Calories", value: "calories" },
        { text: "Fat (g)", value: "fat" },
        { text: "Carbs (g)", value: "carbs" },
        { text: "Protein (g)", value: "protein" },
        { text: "Iron (%)", value: "iron" }
      ],
       desserts: [
        {
          name: "Frozen Yogurt",
          calories: 159,
          fat: 6.0,
          carbs: 24,
          protein: 4.0,
          iron: "1%"
        },
        {
          name: "Ice cream sandwich",
          calories: 237,
          fat: 9.0,
          carbs: 37,
          protein: 4.3,
          iron: "1%"
        }
      ]
    }
  }
});

  

其次，为了使用 Vuetify，你需要一个 <v-app> 包裹内容。 所以你的 html 应该是这样的：

<div id="app">
  <v-app>
    <v-data-table :headers="headers" :items="desserts" :items-per-page="5" class="elevation-1"></v-data-table>
  </v-app>
</div>

这是我发现的使用 vuetify 的 codepen 示例：https://codepen.io/charlesok/pen/yqmEXE

请注意，他还为 Vue、Vuetify 和 babel-polyfill 添加了几个 CDN，以便正确显示 Vue 和 Vuetify。