如何在Codepen中使用TypeScript编写Vuetify组件？v-data-table无法显示

嘿，我帮你揪出了代码里几个导致组件跑不起来的问题，咱们一步步修正：

核心问题排查与修正 #

你的代码主要有这几个关键问题：

1. Vue实例语法错误：TypeScript里的对象写法不规范，el属性没加引号，属性之间缺逗号，而且数据没放在Vue要求的data选项里
2. 未初始化Vuetify插件：Vuetify是Vue的第三方插件，必须在创建Vue实例时明确引入它才能生效
3. 多余的template标签：#app容器里不需要额外嵌套<template>，直接放组件即可

修正后的完整代码 #

HTML部分 #

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

TypeScript部分 #

// 先初始化Vuetify实例
const vuetify = new Vuetify();

new Vue({
  el: '#app', // 注意这里要加引号，符合对象属性语法
  vuetify, // 把Vuetify实例传入Vue，让插件生效
  data() { // Vue组件的响应式数据必须放在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%" }
      ]
    };
  }
});

Codepen设置确认 #

还要确保你在Codepen里的配置没问题：

• 顶部框架选择：确认已经选中了Vue、TypeScript和Vuetify
• 如果是用Vuetify 3（搭配Vue 3），代码要改成Vue 3的写法（用createApp），不过Codepen默认的Vuetify大概率是2.x版本，上面的代码就能正常运行

把这些调整完，你的v-data-table应该就能正常渲染出来啦～

内容的提问来源于stack exchange，提问作者drunkdolphin