引用路径错了

1. 你的router文件夹应该是在src里面的，所以路径不能带 src

2. ...from ./router 会默认找到router里面的 index.js 

所以只需要写 import router from './router'

莫名其妙的又好了 😣

我也是；我在官网找了新的写法

<template>

    <div>

      <nav-header></nav-header>

      <nav-main></nav-main>

      <nav-fotter></nav-fotter>

    </div>

</template >

<script setup>

import NavHeader from '@/components/navHeader/NavHeader.vue';

import NavFotter from '@/components/navFotter/NavFotter.vue';

import NavMain from '@/components/navMain/NavMain.vue';

</script>

<style scoped lang="scss">

</style>

在Vue的组件定义中，命名是借鉴了React框架的习惯，即驼峰法；但是，浏览器在解析html文档时，标签名、标签属性名这些是不区分字母大小写的；在Script标签中通过JavaScript引入的组件是通过标签的形式来使用的，如果组件名/标签名是包含大写字母的，那么会被自动替换成-连接小写单词的标签名，以能够在html中引用。

对于 Vue 3，你应该使用 npm 上可用的 Vue CLI v4.5 作为 @vue/cli。要升级，你应该需要全局重新安装最新版本的 @vue/cli：
https://v3.cn.vuejs.org/guide/installation.html#%E5%91%BD%E4%BB%A4%E8%A1%8C%E5%B7%A5%E5%85%B7-cli

对比视频  检查一下代码

智能提示插件 比如volar

遇到驼峰命名，后面的字母有大写的话，引用时要用短横线隔开，然后小写

创建项目的时候可能没有选路由选项

在template里面写组件名的话，编辑器会查找的，如果没有引入，会自动帮引入（@语法编辑器不认识，所以以为没有引入）。写js也会这样，自动在模块包里查找引用然后import进来