如何在home.vue文件中添加导航栏代码?
<p>{'title':'我想把这些加到home.vue文件中,倒是他之前还有其他样式,怎么新增,请给我具体的代码\n<!-- eslint-disable vue/multi-word-component-names -->\n<template>\n <div>\n <div class='Polaris-Stack Polaris-Stack--distributionEqualSpacing Polaris-Stack--alignmentCenter' style='margin-top: 1px;border-bottom: 1px #c1c1c1 solid;padding: 5px;'>\n <div class='Polaris-Stack__Item'>\n <div class='Polaris-Stack Polaris-Stack--spacingTight Polaris-Stack--alignmentCenter'>\n <div class='Polaris-Stack__Item'>\n <div class='sc-1ibht3l-0 uqRZq'>\n </div>\n <div class='sc-1ibht3l-1 hIZedH'>\n <div class='Polaris-ButtonGroup'>\n <div class='Polaris-ButtonGroup__Item'>\n <router-link to='/' class='Polaris-Button'>\n <span class='Polaris-Button__Content'>\n <span class='Polaris-Button__Text'>Dashboard</span>\n </span>\n </router-link>\n </div>\n <div class='Polaris-ButtonGroup__Item'>\n <router-link to='/zone' class='Polaris-Button'>\n <span class='Polaris-Button__Content'>\n <span class='Polaris-Button__Text'>Checkout Zones</span>\n </span>\n </router-link>\n </div>\n <div class='Polaris-ButtonGroup__Item'>\n <router-link to='/funnel' class='Polaris-Button'>\n <span class='Polaris-Button__Content'>\n <span class='Polaris-Button__Text'>Funnels</span>\n </span>\n </router-link>\n </div>\n <div class='Polaris-ButtonGroup__Item'>\n <router-link to='/help' class='Polaris-Button'>\n <span class='Polaris-Button__Content'>\n <span class='Polaris-Button__Text'>Help Center</span>\n </span>\n </router-link>\n </div>\n <div class='Polaris-ButtonGroup__Item'>\n <div>\n <button type='button' id='moreSeting' class='Polaris-Button' tabindex='0' aria-controls='Popover486' aria-owns='Popover486' aria-haspopup='true' aria-expanded='false'>\n <span class='Polaris-Button__Content'>\n <span class='Polaris-Button__Text'>More</span>\n <span class='Polaris-Button__Icon'>\n <span class='Polaris-Icon'>\n <svg viewBox='0 0 20 20' class='Polaris-Icon__Svg' focusable='false' aria-hidden='true'>\n <path d='M5 8l5 5 5-5z' fill-rule='evenodd'></path>\n </svg>\n </span>\n </span>\n </span>\n <div id='dropdownContent' class='dropdown-content'>\n <!-- 这里放下拉列表的内容 -->\n <a href='payment.html'>Payment</a>\n <a href='facebookPixel.html'>Pixel</a>\n </div>\n </button>\n \n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</template>\n\n<script>\nexport default {\n // eslint-disable-next-line vue/multi-word-component-names\n name: 'Home',\n};\n</script>\n\n<style>\n@import '../style.css'; \n</style>\n\n上面的代码是home.vue文件,应该怎么加,从哪里加,要怎么改代码,请给我具体的代码\n<div class='Polaris-Stack Polaris-Stack--distributionEqualSpacing Polaris-Stack--alignmentCenter' style='margin-top: 1px;border-bottom: 1px #c1c1c1 solid;padding: 5px;'>\n\t<div class='Polaris-Stack__Item'>\n\t\t<div class='Polaris-Stack Polaris-Stack--spacingTight Polaris-Stack--alignmentCenter'>\n\t\t\t<div class='Polaris-Stack__Item'>\n\t\t\t\t<div class='sc-1ibht3l-0 uqRZq'></div>\n\t\t\t\t<div class='sc-1ibht3l-1 hIZedH'>\n\t\t\t\t\t<div class='Polaris-ButtonGroup'>\n\t\t\t\t\t\t<div class='Polaris-ButtonGroup__Item'>\n\t\t\t\t\t\t\t<a data-polaris-unstyled='true' class='Polaris-Button' href='index.html'>\n\t\t\t\t\t\t\t\t<span class='Polaris-Button__Content'>\n\t\t\t\t\t\t\t\t\t<span class='Polaris-Button__Text'>Dashboard</span>\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div class='Polaris-ButtonGroup__Item'>\n\t\t\t\t\t\t\t<a data-polaris-unstyled='true' class='Polaris-Button' href='zone.html'>\n\t\t\t\t\t\t\t\t<span class='Polaris-Button__Content'>\n\t\t\t\t\t\t\t\t\t<span class='Polaris-Button__Text'>Checkout Zones</span>\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div class='Polaris-ButtonGroup__Item'>\n\t\t\t\t\t\t\t<a data-polaris-unstyled='true' class='Polaris-Button' href='funnel.html'>\n\t\t\t\t\t\t\t\t<span class='Polaris-Button__Content'>\n\t\t\t\t\t\t\t\t\t<span class='Polaris-Button__Text'>Funnels</span>\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div class='Polaris-ButtonGroup__Item'>\n\t\t\t\t\t\t\t<a data-polaris-unstyled='true' class='Polaris-Button' href='help.html'>\n\t\t\t\t\t\t\t\t<span class='Polaris-Button__Content'>\n\t\t\t\t\t\t\t\t\t<span class='Polaris-Button__Text'>Help Center</span>\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div class='Polaris-ButtonGroup__Item'>\n\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t<button type='button' id='moreSeting' class='Polaris-Button' tabindex='0' aria-controls='Popover486' aria-owns='Popover486' aria-haspopup='true' aria-expanded='false'>\n\t\t\t\t\t\t\t\t\t<span class='Polaris-Button__Content'>\n\t\t\t\t\t\t\t\t\t\t<span class='Polaris-Button__Text'>More</span>\n\t\t\t\t\t\t\t\t\t\t<span class='Polaris-Button__Icon'>\n\t\t\t\t\t\t\t\t\t\t\t<span class='Polaris-Icon'>\n\t\t\t\t\t\t\t\t\t\t\t\t<svg viewBox='0 0 20 20' class='Polaris-Icon__Svg' focusable='false' aria-hidden='true'>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<path d='M5 8l5 5 5-5z' fill-rule='evenodd'></path>\n\t\t\t\t\t\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t<div id='dropdownContent' class='dropdown-content'>\n\t\t\t\t\t\t\t\t\t\t<a href='payment.html'>Payment</a>\n\t\t\t\t\t\t\t\t\t\t<a href='facebookPixel.html'>Pixel</a>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<div class='Polaris-Stack__Item'>\n\t\t<div class='Polaris-Stack Polaris-Stack--spacingTight'>\n\t\t\t<div class='Polaris-Stack__Item'>\n\t\t\t\t<div class='sc-1pokqsy-0 dqXEel'>\n\t\t\t\t\t<div tabindex='-1' aria-controls='Popover493' aria-owns='Popover493' aria-haspopup='true' aria-expanded='false'>\n\t\t\t\t\t\t<div class='sc-1pokqsy-1 fQGSrj'>\n\t\t\t\t\t\t\t<div class='Polaris-Stack Polaris-Stack--spacingExtraTight Polaris-Stack--alignmentCenter'>\n\t\t\t\t\t\t\t\t<div class='Polaris-Stack__Item'>\n\t\t\t\t\t\t\t\t\t<p>Status: </p>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div class='Polaris-Stack__Item'>\n\t\t\t\t\t\t\t\t\t<span class='Polaris-Badge Polaris-Badge--statusSuccess'>\n\t\t\t\t\t\t\t\t\t\t<span class='Polaris-VisuallyHidden'>Success</span>Enabled\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div class='Polaris-Stack__Item'>\n\t\t\t\t\t\t\t\t\t<span class='Polaris-Icon Polaris-Icon--colorInkLightest Polaris-Icon--isColored'>\n\t\t\t\t\t\t\t\t\t\t<svg viewBox='0 0 20 20' class='Polaris-Icon__Svg' focusable='false' aria-hidden='true'>\n\t\t\t\t\t\t\t\t\t\t\t<path d='M5 8l5 5 5-5z' fill-rule='evenodd'></path>\n\t\t\t\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class='ynsxbt-0 iqzcmc' style='display: none;'>\n\t\t\t\t\t\t<div class='ynsxbt-1 fHRVPN'>\n\t\t\t\t\t\t\t<div class='Polaris-Card'>\n\t\t\t\t\t\t\t\t<div class='Polaris-Card__Section'>\n\t\t\t\t\t\t\t\t\t<div class='Polaris-Stack Polaris-Stack--distributionEqualSpacing'>\n\t\t\t\t\t\t\t\t\t\t<div class='Polaris-Stack__Item'>\n\t\t\t\t\t\t\t\t\t\t\t<h2 class='Polaris-Heading'>Disable PPFunnels?</h2>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t<div class='Polaris-Stack__Item'>\n\t\t\t\t\t\t\t\t\t\t\t<div class='ynsxbt-2 gYaAIi'>\n\t\t\t\t\t\t\t\t\t\t\t\t<span class='Polaris-Icon Polaris-Icon--colorInkLightest Polaris-Icon--isColored'>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<svg viewBox='0 0 20 20' class='Polaris-Icon__Svg' focusable='false' aria-hidden='true'>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<path d='M11.414 10l6.293-6.293a.999.999 0 1 0-1.414-1.414L10 8.586 3.707 2.293a.999.999 0 1 0-1.414 1.414L8.586 10l-6.293 6.293a.999.999 0 1 0 1.414 1.414L10 11.414l6.293 6.293a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414L11.414 10z' fill-rule='evenodd'></path>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div class='ynsxbt-3 bZoarq'>\n\t\t\t\t\t\t\t\t\t<div class='Polaris-Card'>\n\t\t\t\t\t\t\t\t\t\t<div class='Polaris-Card__Section'>\n\t\t\t\t\t\t\t\t\t\t\t<div class='Polaris-TextContainer'>\n\t\t\t\t\t\t\t\t\t\t\t\t<p>All PPFunnels features will be disabled.</p>\n\t\t\t\t\t\t\t\t\t\t\t\t<p>Checkouts will be processed by Shopify.</p>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div class='Polaris-Card__Section'>\n\t\t\t\t\t\t\t\t\t<div class='Polaris-Stack Polaris-Stack--distributionTrailing'>\n\t\t\t\t\t\t\t\t\t\t<div class='Polaris-Stack__Item'>\n\t\t\t\t\t\t\t\t\t\t\t<div class='Polaris-ButtonGroup'>\n\t\t\t\t\t\t\t\t\t\t\t\t<div class='Polaris-ButtonGroup__Item'>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<button type='button' class='Polaris-Button'>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class='Polaris-Button__Content'>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class='Polaris-Button__Text'>Cancel</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t<div class='Polaris-ButtonGroup__Item'>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<button type='button' class='Polaris-Button Polaris-Button--destructive'>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class='Polaris-Button__Content'>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class='Polaris-Button__Text'>Disable PPFunnels</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>内容:要将上面的代码添加到home.vue文件中,可以按照以下步骤进行:</p>
<ol>
<li>打开home.vue文件。2. 找到template标签的开头,添加以下代码:html<div class='Polaris-Stack Polaris-Stack--distributionEqualSpacing Polaris-Stack--alignmentCenter' style='margin-top: 1px;border-bottom: 1px #c1c1c1 solid;padding: 5px;'> <div class='Polaris-Stack__Item'> <div class='Polaris-Stack Polaris-Stack--spacingTight Polaris-Stack--alignmentCenter'> <div class='Polaris-Stack__Item'> <div class='sc-1ibht3l-0 uqRZq'> </div> <div class='sc-1ibht3l-1 hIZedH'> <div class='Polaris-ButtonGroup'> <div class='Polaris-ButtonGroup__Item'> <router-link to='/' class='Polaris-Button'> <span class='Polaris-Button__Content'> <span class='Polaris-Button__Text'>Dashboard</span> </span> </router-link> </div> <div class='Polaris-ButtonGroup__Item'> <router-link to='/zone' class='Polaris-Button'> <span class='Polaris-Button__Content'> <span class='Polaris-Button__Text'>Checkout Zones</span> </span> </router-link> </div> <div class='Polaris-ButtonGroup__Item'> <router-link to='/funnel' class='Polaris-Button'> <span class='Polaris-Button__Content'> <span class='Polaris-Button__Text'>Funnels</span> </span> </router-link> </div> <div class='Polaris-ButtonGroup__Item'> <router-link to='/help' class='Polaris-Button'> <span class='Polaris-Button__Content'> <span class='Polaris-Button__Text'>Help Center</span> </span> </router-link> </div> <div class='Polaris-ButtonGroup__Item'> <div> <button type='button' id='moreSeting' class='Polaris-Button' tabindex='0' aria-controls='Popover486' aria-owns='Popover486' aria-haspopup='true' aria-expanded='false'> <span class='Polaris-Button__Content'> <span class='Polaris-Button__Text'>More</span> <span class='Polaris-Button__Icon'> <span class='Polaris-Icon'> <svg viewBox='0 0 20 20' class='Polaris-Icon__Svg' focusable='false' aria-hidden='true'> <path d='M5 8l5 5 5-5z' fill-rule='evenodd'></path> </svg> </span> </span> </span> <div id='dropdownContent' class='dropdown-content'> <!-- 这里放下拉列表的内容 --> <a href='payment.html'>Payment</a> <a href='facebookPixel.html'>Pixel</a> </div> </button> </div> </div> </div> </div> </div> </div> </div></div>3. 找到style标签的开头,添加以下代码:css.Polaris-Stack.Polaris-Stack--distributionEqualSpacing.Polaris-Stack--alignmentCenter { margin-top: 1px; border-bottom: 1px #c1c1c1 solid; padding: 5px;}4. 保存文件。</li>
</ol>
<p>这样就将上面的代码添加到home.vue文件中了。请注意,如果你在之前已经有其他样式,可能需要根据需要进行样式的调整和合并</p>
原文地址: https://www.cveoy.top/t/topic/p5mH 著作权归作者所有。请勿转载和采集!