如何在html文件中使用element组件

问题遇到的现象和发生背景

个人学了html和css，现在在学vue和element。一直都是用cdn引入依赖文件的，所以很多步骤不是很清楚。
就比如这里，如何直接使用element组件呢？单html文件内？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <!-- 导入样式 -->
    <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
    <!-- 导入 Vue 3 -->
    <script src="//cdn.jsdelivr.net/npm/vue@next"></script>
    <!-- 导入组件库 -->
    <script src="//unpkg.com/element-plus"></script>
</head>
<body>
<div id="app">
    <template>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="Date" width="180" />
            <el-table-column prop="name" label="Name" width="180" />
            <el-table-column prop="address" label="Address" />
        </el-table>
    </template>
</div>

<script>
    const App = {
        data() {
            return {
                message: 15
            }
        }
    }
    const app = Vue.createApp(App);
    app.use(ElementPlus);
    app.mount('#app');
</script>
<script lang="ts" setup>
    const tableData = [
        {
            date: '2016-05-03',
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles',
        },
        {
            date: '2016-05-02',
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles',
        },
        {
            date: '2016-05-04',
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles',
        },
        {
            date: '2016-05-01',
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles',
        },
    ]
</script>

</body>
</html>

我看element的网站上给的文档是直接丢了这个组件的基础代码。但我不知道如何使用它，就是让这个表格能在上面的html页面中展示出来。我在上面拷贝进去但似乎并没有效果的样子。

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
  </el-table>
</template>

<script lang="ts" setup>
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
</script>

控制台跳出为

Property "tableData" was accessed during render but is not defined on instance. 
  at <App>

当然，如果还是需要完整安装依赖文件才能生效，还请各位也说下要怎么弄，谢谢。

要么用cdn要么就下依赖文件，搜npm下载依赖就行了

那element同样用cdn引入吧和你vue一样的

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>