如何在适配Magento 2.2.4的VSF 1中覆写Storefront UI调整Capybara主题导航

你之前移动o-header.vue里的#navigation插槽内容没有生效，是因为插槽的渲染位置由父组件SfHeader的源码决定，默认导航插槽和logo、搜索栏在同一行，调整插槽内容的位置不会改变插槽本身在父组件布局中的位置，你可以通过以下几种方式实现需求：

方案1：局部覆写SfHeader组件（适配单场景修改需求） #

• 复制node_modules\@storefront-ui\vue\src\components\organisms\SfHeader\SfHeader.vue文件到你的主题组件目录，目标路径为\vue-storefront\src\themes\capybara\components\organisms\SfHeader.vue
• 打开o-header.vue，将原有导入SfHeader的语句

import { SfHeader } from '@storefront-ui/vue'

替换为导入本地覆写的文件：

import SfHeader from '~/themes/capybara/components/organisms/SfHeader.vue'

• 修改本地的SfHeader.vue文件结构，把navigation插槽的代码块移动到logo、搜索栏对应的代码下方，同时调整对应CSS样式适配新布局，修改完成后重启开发服务即可生效。

方案2：全局覆写SfHeader组件（适配全项目多处使用该组件的场景） #

• 按照方案1的步骤复制SfHeader.vue到本地主题目录
• 打开项目根目录下的config/webpack/base.config.js，在resolve.alias配置项中添加如下规则：

'@storefront-ui/vue/src/components/organisms/SfHeader/SfHeader.vue': path.resolve(__dirname, '../../src/themes/capybara/components/organisms/SfHeader.vue')

• 配置完成后所有项目中导入SfHeader的位置都会自动加载你本地修改后的文件，无需逐个调整导入语句。

方案3：无需覆写第三方组件的轻量实现方案 #

你可以直接在o-header.vue中弃用SfHeader自带的布局结构，自己编写头部的DOM结构，把导航栏代码直接写在logo、搜索栏的下方位置，这种方式不会修改第三方依赖代码，后续升级Storefront UI版本时不会出现兼容冲突，是更推荐的实现方式。

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