初次接触vue-cli，进行表格数据读取

Question

排查了很多，就是找不到，一直报错
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

代码如下：
App.vue

<template>
  <div id="app">
    <DataTable></DataTable>
  </div>
</template>
<script setup>
import DataTable from "./components/DataTable.vue";

export default {
  name:'App',
  components:{
    // DataTable,
    'DataTable':DataTable
  }
}
</script>

main.js

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue'
Vue.use(ElementUI)
new Vue({
  el: '#app',
  render:h => h(App)
})

<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data(){
    return{
      // 定义数据
      tableData:[{
        date: '2023-11-02',
        name: '张三',
        address: '重庆市涪陵区'
      },{
        date: '2023-11-03',
        name: '李四',
        address: '西安市雁塔区'
      },{
        date: '2023-11-04',
        name: '王五',
        address: '西安市未央区'
      },{
        date: '2023-11-05',
        name: '赵六',
        address: '西安市灞桥区'
      }
      ]
    }
  }
}
</script>

Answer 1

【相关推荐】

• 你可以看下这个问题的回答https://ask.csdn.net/questions/7443633
• 这篇博客也不错, 你可以看下vue-cli脚手架创建vue项目
• 您还可以看一下 夏昊老师的VUE入门课程中的 vue-cli搭建vue项目小节, 巩固相关知识点
  
• 除此之外, 这篇博客: Vue-cli 4.x 中的全局样式配置中的 .App.vue配置 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

  很简单的一步,在App.vue的< style >标签中加入lang属性:

  <style lang="scss">
  

  即可.

  好吧,我们在全局scss文件里随便写点什么:

  body {
      background-color: rgb(177, 60, 82);
  }
  
  

  
  到此说明我们的全局scss文件引入成功了.

  ---

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^