Vue+CSS/SCSS菜单组件如何在所有视图正确调用生效

先排查最高概率的新手踩坑点 #

• 标签重名冲突是核心诱因
  menu是HTML规范里的内置语义标签，你注册的组件名和它完全重名时，Vue的模板解析器会优先把<menu>识别成原生HTML元素，根本不会匹配你注册的自定义组件。原生<menu>标签本身没有默认渲染内容，自然看起来什么效果都没有。
• 误用其他框架的Fragment语法
  你写的<Fragment>是React中的语法，Vue无论2.x还是3.x版本，都没有把<Fragment>作为全局内置标签的实现：
  • Vue2要求模板必须有单一根节点，写一个Vue不认识的<Fragment>当根标签，会直接导致模板解析失败
  • Vue3支持多根节点的抽象片段逻辑，但不需要手动写<Fragment>标签，直接并列写元素即可，写了反而会被当成未知原生元素处理
• 相对路径计算错误
  检查import menu from '../components/Head/menu.vue'的路径层级：如果你的首页视图文件放在src/views/Home/index.vue目录下，指向src/components/Head/menu.vue的路径应该是../../components/Head/menu.vue，少写一层../就会找不到组件文件，导入失败时控制台会抛出Failed to resolve component: menu的警告。
• 重复引用冗余
  原代码在两个位置写了菜单标签引用，就算组件渲染正常也会出现两个完全一样的菜单，确认布局需求后删掉外层多余的那个即可。

修正后的代码参考 #

1. 先给组件换一个不和原生标签重名的名字，比如HeadMenu
2. 去掉无效的<Fragment>标签，按Vue的模板规范调整结构：

   <template>
     <div class="portada">
       <HeadMenu></HeadMenu>
       <div id="desarrollofrontend">
        Test Menu
       </div>
       <div class="text">
         <h1>Test Menu Home</h1> 
         <h3>Description home</h3>
       </div>
     </div>
   </template>
   
   <script>
   // 导入时对应改成新的组件名
   import HeadMenu from '../components/Head/menu.vue'
   
   export default {
     components: { HeadMenu }
   } 
   </script>
   

快速定位问题的验证方法 #

打开浏览器开发者工具的Elements面板，看对应位置的DOM结构：

• 如果找不到组件内部的DOM（比如菜单的ul、li等自定义标签）：说明组件压根没被Vue解析，优先检查上面提到的标签冲突、路径错误、组件注册问题
• 如果能找到完整的组件DOM但没有样式效果：再排查SCSS相关问题，比如是否正常安装sass-loader、组件的scoped样式是否作用域匹配、选择器优先级是否被覆盖

全视图复用的优化方案 #

如果要在所有页面都使用这个菜单组件，不需要每个页面都写一遍import和注册逻辑，在项目入口文件（main.js/main.ts）全局注册一次即可：

• Vue2写法：

  import Vue from 'vue'
  import HeadMenu from './components/Head/menu.vue'
  // 全局注册后所有页面都可以直接用<HeadMenu>标签
  Vue.component('HeadMenu', HeadMenu)
  

• Vue3写法：

  import { createApp } from 'vue'
  import App from './App.vue'
  import HeadMenu from './components/Head/menu.vue'
  const app = createApp(App)
  app.component('HeadMenu', HeadMenu)
  app.mount('#app')
  

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